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

Question

嗨，我正在 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>

但不知道如何在这里做到这一点。

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

Answer 1

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

1. 将 Canvas 标记添加到您的应用中:

    <canvas id="myCanvas" />
   

2. 将图像加载到 Canvas 内:

   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 返回 Canvas 内 x、y、宽度和高度位置处的所有 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);
   

Here msdn 上有一个很好且完整的示例。