javascript - DOM 中基于像素的图像操作

Question

作为我正在用 Javascript 开发的游戏的一部分，我想：

1. 从 URL 加载图像
2. 对其进行一些基于像素的操作（准确地说，对其进行一些颜色过滤器操作）
3. 将处理后的图像作为一个<IMG>节点放入 html 文档的 dom 中

我已经很清楚如何完成前两部分了——我只是要将图像绘制到一个不可见的画布上。但是我该怎么做最后一个？

我考虑从画布中提取原始二进制数据，然后将其转换为数据 URL。但这对我来说似乎很难。没有更直接的方法吗？当有帮助时，我有可用的 jQuery 和 jQueryUI。

Answer 1

该canvas元素有一个toDataURL()方法，可以为您提供现成的数据 URL。