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

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

问题是JavaScript不知何故没有将画布转换为图像数据

在此处检查JSFIDLE：

我尝试使用

window.location=finalcanvas.toDataURL（“image/png”）和

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

var img=finalcanvas.toDataURL（“image/png”）；
文件。写（“”）；

但他们都不起作用

如何将使用drawImage方法的画布图像转换为png数据？
在JSFIDLE代码中，您似乎在画布上绘制外部图像。这将阻止访问像素数据和toDataURL（如果出于安全原因是跨域访问）

这个问题在这里已经讲过很多次了,；有关使用CORS解决此问题和浏览器支持的讨论，请参阅。另一个选项可能是通过本地代理加载图像。
在JSFIDLE代码中，您似乎将外部图像绘制到画布上。这将阻止访问像素数据和toDataURL（如果出于安全原因是跨域访问）。因此，您认为这是不可能的？不，只是有点棘手：