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

Question

作为我用 Javascript 开发的游戏的一部分，我想要:

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

我已经很清楚如何完成前两部分 - 我只是将图像绘制到看不见的 Canvas 上。但最后一项我该怎么做呢？

我考虑过从 Canvas 中提取原始二进制数据，然后将其转换为数据 URL。但这对我来说似乎很难。难道就没有更直接的方法吗？我有 jQuery 和 jQueryUI，如果有帮助的话。

Answer 1

canvas 元素有一个 toDataURL() method这为您提供了一个随时可用的数据 URL。