如何在winjs中设置png图像的颜色

how to set png image color in winjs

本文关键字：png 图像 颜色 设置 winjs      更新时间：2023-09-26

嗨，我正在使用html和javascript开发一个windows 8应用程序。在那里，我必须显示一些从api接收的png图像，并且必须将它们的颜色设置为从api接收。我在谷歌上搜索了很多，但没有找到解决方案。虽然我知道在xaml中它可以做一些像这个一样的事情

<Rectangle Fill="{Binding Path=widget.logo, Converter={StaticResource PSWidgetLogoColorConverter1}}" Height="60" Width="60">
                                        <Rectangle.OpacityMask>
                                            <ImageBrush ImageSource="{Binding Path=widget.logo,Converter={StaticResource PSWidgetImageConverter1}}"/>
                                        </Rectangle.OpacityMask>
                                    </Rectangle>

但不知道怎么在这里做。

欢迎您的宝贵建议，请帮忙。

我认为您必须更改canvas元素内部的颜色。

  1. 将画布标签添加到您的应用程序：

     <canvas id="myCanvas" />

  2. 在画布内加载图像：

    var myImage = new Image();
canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
  ctx = canvas.getContext("2d");
  myImage.onload = function() {
    ctx.drawImage(myImage, 0, 0);
  }
  myImage.src = "kestral.png";
}

  3. 获取图像数据并根据需要进行更改：

getImageData返回画布内x、y、width和height位置的所有rgba值。所以是：getImageData(x,y,width,height)。结果，你得到了一个大小为：width*height*4的数组。然后你可以在它上面循环并更改每个rgba颜色：

    myImage = ctx.getImageData(0, 0, 200, 200);
    var picLength = 200*200;
    // Loop through data.
    for (var i = 0; i < picLength * 4; i += 4) {
      // First bytes are red bytes.        
      // Second bytes are green bytes.
      // Third bytes are blue bytes.
      // Fourth bytes are alpha bytes
      //check for full alpha
      if(myImage.data[i+3] == 255) {
         //change it to black
         myImage.data[i]=0;
         myImage.data[i+1]=0;
         myImage.data[i+2]=0;
         myImage.data[i+3]=0;
      }
    }

  1. 将更改后的图像数据放回

    ctx.putImageData(myImage, 0, 0);

下面是一个关于msdn的完整示例。

相关文章：