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

我正在制作一个页面，您可以在画布上绘制图像。你有6个图像选项，当你完成后，我希望人们能够保存他们的创作。使用toDataURL时，如何获取使用drawImage绘制的图像？

我使用drawImage画在画布上的图像，但是当我使用下面的代码：

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

它不会显示在DataUrl图像绘制的图像。

如何确保在画布上绘制的图像在toDataURL给出的图像中也可见？

来源

2012-05-14 Buit

它应该工作，除非你的浏览器不支持显示数据URL。在这种情况下，您需要处理结果服务器端并提供png结果。 – mpm

它的工作原理，我在dtaturl上看到的正常线条，但是我在画布上绘制的drawimages未显示。任何想法？ – Buit

什么是您的网页和您正在绘制的图像的网址？

如果您的图像不是来自与页面相同的原点，您将无法使用toDataURL或任何其他方法来读取画布的内容;这是一个有意的安全功能。检查你的JavaScript错误控制台，你可能会看到类似“DOM ERROR”或“SECURITY EXCEPTION”的内容。

什么我的意思是？我的意思是，如果你的网页是在一些URL（例如，test.com，localhost:8080，file:///home/foo/）和您绘制的图像位于与不同来源的网址（google.com是test.com不同来源，localhost:3000为localhost:8080，一些不同的起源浏览器将file:///网址视为始终来自不同的来源），那么一旦您将图像绘制到浏览器中，浏览器就会将您的画布标记为不可读。

为什么是这样吗？页面可以显示来自其他来源的图像，但除非明确授权，否则许多其他形式的跨域访问将被拒绝 - 例如，XMLHttpRequest。

file对URL的处理方式也不同，因为它们可能更容易滥用。如果您使用本地文件作为页面和图像，请使用普通的Web服务器代替它们。

The first bullet in this section适用。

来源

2012-05-14 15:12:07 ellisbben

它可以使用IE浏览器，但不能使用Chrome浏览器 – Buit

页面和图像的URL是什么？ '文件：//'？ – ellisbben

即时只是做本地，所以我有一些图像在我的电脑和代码的HTML页面是在我的电脑上的同一个地方。但我认为我工作在IE浏览器，但它并没有 – Buit

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

回答

相关问题