从HTML Canvas元素生成图像数据

Question

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

我想创建图像数据，以便将其传输到服务器（用户无需直接保存到文件中）。图像数据应采用通用格式，如PNG或JPEG。

首选在多个浏览器中正常运行的解决方案，但如果每个解决方案都依赖于浏览器，则应定位最新版本的Firefox。

Answer 1

Firefox和Opera使用toDataURL()方法返回数据网址格式化的PNG。您可以将结果分配给表单域以将其提交给服务器。

数据URL是base-64编码的，因此您必须在服务器端对其进行解码。你还需要剥离“data：image / png;”部分当然。

Answer 2

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

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