[英]How can I get images drawn with drawImage to be included when using toDataURL?
I'm working on a page where you will be able to draw images on a canvas. 我正在一个页面上,您将可以在画布上绘制图像。 You have 6 options of images, and when you are done I want people to able to save their creation.
您有6种图像选择,完成后,我希望人们能够保存他们的创作。
I'm using drawImage
to draw the images on the canvas, but when I use the following code: 我正在使用
drawImage
在画布上绘制图像,但是当我使用以下代码时:
var canvas = document.getElementById("canvas");
window.open(canvas.toDataURL("image/png"));
It doesn't show the drawn images on the DataUrl
images. 它不会在
DataUrl
图像上显示绘制的图像。
How can I make sure that the images that are drawn on the canvas are also visible in the image given by toDataURL
? 如何确保在画布上绘制的图像在
toDataURL
给定的图像中也可见?
What are the URLs of your page and the images you are drawing? 页面的URL和正在绘制的图像是什么?
If your images are not coming from the same origin as the page, you will not be able to use toDataURL
or any other methods to read the contents of the canvas; 如果图像与页面来源不同,则将无法使用
toDataURL
或任何其他方法来读取画布的内容。 this is an intentional security feature. 这是故意的安全功能。 Check your JavaScript error console and you may see something like "DOM ERROR" or "SECURITY EXCEPTION".
检查您的JavaScript错误控制台,您可能会看到类似“ DOM错误”或“安全异常”的信息。
What do I mean? 我什么意思 I mean that if your page is at some URL (eg,
test.com
, localhost:8080
, file:///home/foo/
) and the images you are drawing are located at URLs with different origins ( google.com
is a different origin from test.com
, localhost:3000
is a different origin from localhost:8080
, some browsers treat file:///
urls as if they are always from a different origin) then the browser will mark your canvas as unreadable once you draw the image to it. 我的意思是,如果您的网页位于某个网址(例如
test.com
, localhost:8080
, file:///home/foo/
),并且您绘制的图像位于具有不同来源的网址( google.com
是来自test.com
不同来源, localhost:3000
是不同于localhost:8080
,某些浏览器将file:///
url视为始终来自不同的来源),那么一旦绘制,浏览器就会将画布标记为不可读图像。
Why is it this way? 为什么这样呢? Pages can display images from other origins, but many other forms of cross-origin access are denied unless explicitly granted--
XMLHttpRequest
s, for example. 页面可以显示其他来源的图像,但是除非明确允许,否则许多其他形式的跨域访问都将被拒绝-例如
XMLHttpRequest
。
file
URLs are treated differently as well because they are potentially more abusable. file
URL也被区别对待,因为它们可能更易滥用。 If you are using local files for the page and images, serve them with a trivial web server instead. 如果您将本地文件用于页面和图像,请使用简单的Web服务器为其提供服务。
The first bullet in this section applies. 本节中的第一个项目符号适用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.