canvas.toDataURL（）和drawImage（）的安全错误 [英] Security Error with canvas.toDataURL() and drawImage()
问题描述
<！doctype html>
< canvas id =canvasheight =200width =200>< / canvas>
< div id =new>< / div>
< script>
var div = document.getElementById（new）;
var canvas = document.getElementById（canvas）;
var ctx = canvas.getContext（2d）;
var img = new Image（）;
img.src ='http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png';
//img.src ='local.png';
img.onload = function（）{
//在画布上绘制图像（工程）
ctx.drawImage（img，0,0,200,200）;
//从画布创建图片（仅适用于local.png）
var sourceStr = canvas.toDataURL（）;
//创建img-tag并将其添加到div容器
var newImage = document.createElement（img）;
newImage.src = sourceStr;
div.appendChild（newImage）;
}
< / script>
该脚本创建一个带有html5-logo的画布。从这个画布我想创建一个图像，使用toDataURL（） - 方法。这里我得到一个安全错误。
$ b Firefox说 - 错误：未捕获的异常：[异常...安全错误代码：1000nsresult：0x805303e8（NS_ERROR_DOM_SECURITY_ERR ）
Chrome表示 - 未捕获错误：SECURITY_ERR：DOM异常18
如果我使用脚本它在服务器上的图像工作正常。所以这次它认为这真的是一个功能，而不是一个错误。
有没有人有一个想法，我怎样才能创建一个图像使用画布与其他服务器的图像形式？
BTW：如果您在没有web服务器的情况下将网站作为本地文件运行，则会发生错误。 你说的对这是一个安全功能，而不是一个bug。
如果读取图像（例如用 因此，canvas元素有一个 origin-clean 标志，当外部图像写入画布。在这种情况下，您不能再读取它。 您可以阅读关于此主题的更多信息这里。 toDataURL 或 getImageData ）可以工作，也可以从
<!doctype html>
<canvas id="canvas" height="200" width="200"></canvas>
<div id="new"></div>
<script>
var div = document.getElementById("new");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = 'http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png';
//img.src = 'local.png';
img.onload = function(){
//draws the image on the canvas (works)
ctx.drawImage(img,0,0,200,200);
//creates an image from the canvas (works only for local.png)
var sourceStr = canvas.toDataURL();
//creates the img-tag and adds it to the div-container
var newImage = document.createElement("img");
newImage.src = sourceStr;
div.appendChild(newImage);
}
</script>
This script creates a canvas with the html5-logo. From this canvas I want to create an image, using the "toDataURL()"-method. Here I get a security error.
Firefox says - Error: uncaught exception: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)"
Chrome says - Uncaught Error: SECURITY_ERR: DOM Exception 18
If I use the script with an image on the server it works fine. So it think this time it is really a feature and not a bug. Does anyone has an idea how I can create an image using canvas with out of an image form an other server? BTW: the error occurs if you run the site as a local file without a webserver.
You are right, this is a security feature, not a bug.
If reading the Image (for instance with toDataURL or getImageData) would work, you could also read https://mail.google.com/mail/ from the context of your visitor get his emails or whatever.
Therefore, canvas elements have a origin-clean flag, which is set when external images are written to the canvas. In that case, you can no longer read from it.
You can read more about this topic here.
这篇关于canvas.toDataURL（）和drawImage（）的安全错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
