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

Question

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

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

我想根据 RGB（或其他方式）将像素着色为黑色。

至

我知道怎么做 Java

并找到了如何在 C++ 上执行此操作的源代码（示例）

但是JavaScript……嗯

请帮我。

Answer 1

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

请参阅这篇文章，了解如何在将图像转换为画布表示后获取像素颜色： 如何从图像中获取像素的 x,y 坐标颜色？.

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

这会非常慢，如果不锁定浏览器，边界线可能不可行（我还没有亲自使用过画布，还不知道它的性能），除非你把它卸载到一个网络工作者身上，这样它就发生在另一个线程中。