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

嗨，我正在用html和javascript开发Windows8应用程序。在这里，我必须显示一些从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 id="myCanvas" />

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

getImageData

返回画布内x、y、宽度和高度处的所有rgba值。因此：

getImageData（x，y，宽度，高度）

。因此，您可以得到一个大小为：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;
      }
    }

---

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

谢谢Jan它对我有用，但它显示的是单色蓝色。在png图像中，我尝试更改函数ctx.getImageData（0200,0200）中的值；得到绿色，但它不起作用。我已经更改了RGB格式的值，但它没有显示图像。你能找出我到底犯了什么错误吗。getImageData不返回特定的rgba。它返回画布内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;
      }
    }

ctx.putImageData(myImage, 0, 0);