我正在处理一个您可以在画布上绘制图像的页面。您有 6 个图像选项，完成后我希望人们能够保存他们的创作。
我drawImage用来在画布上绘制图像，但是当我使用以下代码时：
var canvas = document.getElementById("canvas");
window.open(canvas.toDataURL("image/png"));
它不会在图像上显示绘制的DataUrl图像。
如何确保在画布上绘制的图像在由给出的图像中也可见toDataURL？
您的页面和您正在绘制的图像的 URL 是什么？
如果您的图像与页面的来源不同，您将无法使用toDataURL或任何其他方法来读取画布的内容；这是一个有意的安全功能。检查您的 JavaScript 错误控制台，您可能会看到类似“DOM ERROR”或“SECURITY EXCEPTION”的内容。
我是什么意思？我的意思是，如果您的页面位于某个 URL（例如 , , ）test.com并且您正在绘制的图像位于具有不同来源的URL （与总是来自不同的来源），那么一旦您将图像绘制到它，浏览器就会将您的画布标记为不可读。localhost:8080file:///home/foo/google.comtest.comlocalhost:3000localhost:8080file:///
为什么会这样？页面可以显示来自其他来源的图像，但许多其他形式的跨域访问被拒绝，除非明确授予XMLHttpRequest——例如。
fileURL 也被区别对待，因为它们可能更容易被滥用。如果您为页面和图像使用本地文件，请改为使用简单的 Web 服务器来提供它们。
本节中的第一个项目符号适用。