Javascript 在使用toDataURL时，如何获取使用drawImage绘制的图像？

我正在做一个页面，你可以在画布上画图像。您有6个图像选项，当您完成后，我希望人们能够保存他们的创作

我正在使用

drawImage

在画布上绘制图像，但使用以下代码时：

var canvas = document.getElementById("canvas");  
window.open(canvas.toDataURL("image/png"));

它不会在

DataUrl

图像上显示绘制的图像

---

如何确保在画布上绘制的图像在

toDataURL

给出的图像中也可见？

您的页面的URL和正在绘制的图像是什么

如果您的图像与页面的来源不同，您将无法使用

toDataURL

或任何其他方法来读取画布的内容；这是一个有意的安全特性。检查JavaScript错误控制台，您可能会看到类似“DOM错误”或“安全异常”的内容

我是什么意思？我的意思是，如果您的页面位于某个URL（例如，

test.com

，

localhost:8080

，

file:///home/foo/

）和您正在绘制的图像位于具有不同来源的URL上（

google.com

与

test.com

是不同的来源，

localhost:3000

与

localhost:8080

是不同的来源，一些浏览器将

文件：//

URL视为始终来自不同的来源）然后，一旦您将图像绘制到画布上，浏览器会将画布标记为不可读

为什么是这种方式？页面可以显示来自其他来源的图像，但许多其他形式的跨来源访问被拒绝，除非明确授予--

XMLHttpRequest

s，例如

文件

URL的处理方式也有所不同，因为它们可能更易被滥用。如果您将本地文件用于页面和图像，请使用一个简单的web服务器

---

适用。

除非您的浏览器不支持显示数据URL，否则它应该可以工作。在这种情况下，您需要处理结果服务器端并提供结果png。它可以工作，我在它上面画的普通线在数据图集上看到，但我在画布上画的绘图图像不会显示。知道吗？页面和图像的URL是什么？

文件：//

？我只是在本地做，所以我在我的电脑上得到了一些图像，带有代码的html页面在我的电脑上的同一个位置。但我认为我在IE上工作过，但它不能将添加的图像保存在画布上，但一开始我将一张图片作为背景，不知怎的，它不能保存这些图像，而是后来添加的所有图像图像正在工作：）