使用HTML 5 canvas标签和jquery更改图像的颜色

Question

Here is a Fiddle

图像为橙色方形，带有透明圆圈。无论如何改变橙色的颜色而不影响html 5 canvas tag + jquery的透明圆圈/背景。如果有更好的方法我也想听到。

Answer 1

基本上你想做一些可以用大多数图像编辑软件实现的东西。如果编写脚本来操作它，Canvas可以非常强大。例如，当使用CanvasContext（通过画布元素上的getContext（“2d”）获得）时，您可以获取并放置图像数据，这基本上是由4个字节（RGBA）表示的像素集合。这意味着您最终得到一个长度宽度*高度* 4 的数组。

现在我不是图像/画布操作方面的专家，所以我建议的内容可能更容易实现。如果您想要更改图像的橙色部分，例如在其上绘制图像（或纯色），则在任何图像编辑软件上，这意味着您需要使用蒙版。据我所知，在这里，你需要使用面具：

1. 您的图像应该在画布元素上绘制以进行操作。
2. 创建辅助工作区画布。
3. 将画笔（您想要绘制的图像）绘制到工作区中。
4. 获取工作区画布imageData。
5. 替换获取的ImageData的Alpha通道（使用原始画布的图像中的那个）
6. 清除工作区画布。
7. 将新图像数据放到工作区画布上。
8. 将工作区画布绘制到原始画布上。

这意味着您的画笔（纯色）会有一个应用的Alpha通道，其形状与原始图像的橙色部分完全相同。

现在，至少在chrome上，来自imageshack的图像存在问题，那就是你无法获得使用外部域中的图像绘制的画布元素的imageData。这样做会导致一个例外，说明画布被其他域的数据污染了。这意味着您要操作的图像应该托管在运行测试站点的同一域中。 （您必须检查画布文档以了解如何避免这种情况。）

请注意，这只是为了更强大的功能，只需更改形状颜色即可。如果您只想更改它的颜色，您只需操作原始画布的imageData RGB通道，直到找到所需的颜色。

一些有用的链接：

• Using images with canvas
• Mozilla Developer Network - Canvas Element
• Mozilla Developer Network - Canvas Rendering Context