将使用drawimage方法的canvas转换为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。另一种选择可能是通过本地代理加载图像。