javascript - 将使用drawimage方法的画布转换为png

Question

我有两个按钮，一个按钮创建一个带有图像的画布。其他按钮将画布转换为 png 数据（至少，这就是我想要实现的）。

问题是 JavaScript 不会以某种方式将画布转换为图像数据。

在此处检查 jsfiddle：http: //jsfiddle.net/julekker/tjYzw/1/

我试过使用window.location = finalcanvas.toDataURL("image/png");和

var img = finalcanvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');

但他们俩都没有工作。

如何将使用 drawImage 方法的画布图像转换为 png 数据？

Answer 1

在 jsfiddle 代码中，您似乎在画布上绘制了一个外部图像。如果出于安全原因是跨域访问，这将阻止访问像素数据和 toDataURL。

这个问题已经在这里讨论过很多次了；有关使用 CORS 解决此问题和浏览器支持的讨论，请参阅Browser Canvas CORS Support for Cross Domain Loaded Image Manipulation 。另一种选择可能是通过本地代理加载图像。