![](/img/trans.png)
[英]How Can I Prevent Texture Bleeding When Using drawImage To Draw Multiple Images From A Tile Sheet, Sprite Sheet, Or Texture Atlas?
[英]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.com
, localhost:8080
, file:///home/foo/
),并且您绘制的图像位于具有不同来源的网址( google.com
是来自test.com
不同来源, localhost:3000
是不同于localhost:8080
,某些浏览器将file:///
url视为始终来自不同的来源),那么一旦绘制,浏览器就会将画布标记为不可读图像。
为什么这样呢? 页面可以显示其他来源的图像,但是除非明确允许,否则许多其他形式的跨域访问都将被拒绝-例如XMLHttpRequest
。
file
URL也被区别对待,因为它们可能更易滥用。 如果您将本地文件用于页面和图像,请使用简单的Web服务器为其提供服务。
本节中的第一个项目符号适用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.