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