如何在JavaScript中为图像像素着色？

Question

我正在寻找通过某种规则为图像着色的方法。可以说我有一些形象：

<div id="static">
  <img border="0" src="some/image.png">
</div>

我想基于RGB（或其他方式）将像素颜色设置为黑色。

到

我知道如何在Java

中执行此操作

并找到了源代码如何在C ++（example）

上执行此操作

但是JavaScript ...嗯......

请帮帮我。

Answer 1

你应该可以做类似的事情，尽管使用画布的速度可能很慢。

有关如何在将图像转换为画布表示后获取像素颜色的信息，请参阅此文章： How to get a pixel's x,y coordinate color from an image?

您必须使用for循环将event.OffsetX和event.OffsetY替换为每个像素的坐标，以检索每个像素的RGB。然后，如果它与蓝色RGB值不匹配，请将像素颜色替换为黑色，如果是蓝色，则将其替换为白色。

它会非常缓慢，如果不锁定浏览器（我还没有亲自使用canvas来了解它的性能），边界可能是不可行的，除非你将它卸载到web worker，所以它发生在另一个线程。