繁体   English   中英

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

[英]How can I get images drawn with drawImage to be included when using toDataURL?

我正在一个页面上,您将可以在画布上绘制图像。 您有6种图像选择,完成后,我希望人们能够保存他们的创作。

我正在使用drawImage在画布上绘制图像,但是当我使用以下代码时:

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

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

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

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

如果图像与页面来源不同,则将无法使用toDataURL或任何其他方法来读取画布的内容。 这是故意的安全功能。 检查您的JavaScript错误控制台,您可能会看到类似“ DOM错误”或“安全异常”的信息。

我什么意思 我的意思是,如果您的网页位于某个网址(例如test.comlocalhost:8080file:///home/foo/ ),并且您绘制的图像位于具有不同来源的网址( google.com是来自test.com不同来源, localhost:3000是不同于localhost:8080 ,某些浏览器将file:/// url视为始终来自不同的来源),那么一旦绘制,浏览器就会将画布标记为不可读图像。

为什么这样呢? 页面可以显示其他来源的图像,但是除非明确允许,否则许多其他形式的跨域访问都将被拒绝-例如XMLHttpRequest

file URL也被区别对待,因为它们可能更易滥用。 如果您将本地文件用于页面和图像,请使用简单的Web服务器为其提供服务。

本节中的第一个项目符号适用。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM