从 HTML Canvas 元素生成图像数据答案

【问题标题】：Generate image data from HTML Canvas element从 HTML Canvas 元素生成图像数据
【发布时间】：2010-10-29 08:26:11
【问题描述】：

从 HTML 画布元素的内容生成图像数据的最佳方法是什么？

我想创建可以传输到服务器的图像数据（用户不必直接保存到文件中）。图像数据应采用常见格式，例如 PNG 或 JPEG。

首选在多个浏览器中正常工作的解决方案，但如果每个解决方案都依赖于浏览器，则应以最新版本的 Firefox 为目标。

【问题讨论】：

【解决方案1】：

Firefox 和 Opera 有一个 toDataURL() 方法，它返回一个数据 URL 格式的 PNG。您可以将结果分配给表单字段以将其提交给服务器。

数据 URL 采用 base-64 编码，因此您必须在服务器端对其进行解码。您还需要去掉“data:image/png;”当然是一部分。

【讨论】：

【解决方案2】：

我认为您可以使用的库是Canvas2Image，它使用 Canvas 的本机功能，但不适用于任何浏览器。我有这个库的优化版本，如果你愿意，我会与你分享。

然后您可以获取生成的Data URI 并使用 Ajax 将其发送到服务器。

【讨论】：

谢谢，这听起来像是我需要的。我会很感激优化版本。您应该可以通过访问我的个人资料中列出的网站找到我的电子邮件地址。
没问题！ flotr.googlecode.com/svn/trunk/flotr/flotr/prototype/lib/… 我将 BMP 渲染更改为具有 Alpha 通道，并进行了一些速度优化。事实上，我在一个我正在开发的免费库中使用它，所以它是免费的，而且永远都是。
非常感谢！我正在计划的项目可能会免费提供源代码，因为它主要供个人使用。
有什么方法可以让 Chrome 中的另存为...对话框与带有 Canvas2Image 的 Firefox 一样吗？
canvas2image，它可以在 IE 中使用吗？如果是，那么请把文件发给我。