Javascript canvas.toDataURL（）和drawImage（）的安全性错误 var div=document.getElementById（“新”）； var canvas=document.getElementById（“canvas”）； var ctx=canvas.getContext（“2d”）； var img=新图像（）； img.src=http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png'; //img.src='local.png'； img.onload=函数（）{ //在画布上绘制图像（作品） ctx.drawImage（img，0,0200200）； //从画布创建图像（仅适用于local.png） var sourceStr=canvas.toDataURL（）； //创建img标记并将其添加到div容器中 var newImage=document.createElement（“img”）； newImage.src=sourceStr； div.appendChild（newImage）； }_Javascript_Firefox_Google Chrome_Html5 Canvas

Javascript canvas.toDataURL（）和drawImage（）的安全性错误 var div=document.getElementById（“新”）； var canvas=document.getElementById（“canvas”）； var ctx=canvas.getContext（“2d”）； var img=新图像（）； img.src=http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png'; //img.src='local.png'； img.onload=函数（）{ //在画布上绘制图像（作品） ctx.drawImage（img，0,0200200）； //从画布创建图像（仅适用于local.png） var sourceStr=canvas.toDataURL（）； //创建img标记并将其添加到div容器中 var newImage=document.createElement（“img”）； newImage.src=sourceStr； div.appendChild（newImage）； }

javascript firefox google-chrome html5-canvas

Javascript canvas.toDataURL（）和drawImage（）的安全性错误 var div=document.getElementById（“新”）； var canvas=document.getElementById（“canvas”）； var ctx=canvas.getContext（“2d”）； var img=新图像（）； img.src=http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png'; //img.src='local.png'； img.onload=函数（）{ //在画布上绘制图像（作品） ctx.drawImage（img，0,0200200）； //从画布创建图像（仅适用于local.png） var sourceStr=canvas.toDataURL（）； //创建img标记并将其添加到div容器中 var newImage=document.createElement（“img”）； newImage.src=sourceStr； div.appendChild（newImage）； },javascript,firefox,google-chrome,html5-canvas,Javascript,Firefox,Google Chrome,Html5 Canvas,这个脚本创建了一个带有html5徽标的画布。在这个画布上，我想使用“toDataURL（）”-方法创建一个图像。这里有一个安全错误 Firefox显示-Error:uncaught exception:[异常…”“安全错误”代码：“1000”nsresult:“0x805303e8（NS_Error\u DOM_Security_ERR）” Chrome显示-未捕获错误：安全错误：DOM异常18 如果我在服务器上使用带有图像的脚本，它可以正常工作。因此，它认为这一次它确实是一个功能，而不是一个b

这个脚本创建了一个带有html5徽标的画布。在这个画布上，我想使用“toDataURL（）”-方法创建一个图像。这里有一个安全错误

Firefox显示-Error:uncaught exception:[异常…”“安全错误”代码：“1000”nsresult:“0x805303e8（NS_Error\u DOM_Security_ERR）”

Chrome显示-未捕获错误：安全错误：DOM异常18

如果我在服务器上使用带有图像的脚本，它可以正常工作。因此，它认为这一次它确实是一个功能，而不是一个bug。有人知道我如何使用画布创建图像，而不使用来自其他服务器的图像吗？

顺便说一句：如果您在没有Web服务器的情况下将站点作为本地文件运行，则会发生此错误。

我认为此错误是对同源策略的扩展，基本上它不允许您操作来自其他服务器的资源。尽管不安全，但您可以在服务器中构建一种检索外部资源的方法：myserver.com/？external=url/path/to/img…这在理论上是可行的。

你说得对，这是一个安全特性，不是bug

如果读取图像（例如使用

toDataURL

或

getImageData

）可以工作，您也可以读取

https://mail.google.com/mail/

从访问者的上下文中获取他的电子邮件或其他信息

因此，canvas元素有一个originclean标志，该标志在外部图像写入到canvas时设置。在这种情况下，您无法再从中读取

您可以阅读有关此主题的更多信息。

这是一项功能。由于图像位于另一台服务器上，请检查此项

你可以捕捉到这些异常，但这对于其他浏览器来说也是一件令人头疼的事情，而且对安全性来说也是不合适的

因此，更好的解决方案是在本地下载该图像。并提供该图像的src路径。

链接现在已断开，但我相信现在可以找到信息。您找到答案了吗？我有同样的问题，甚至来自同一服务器的图像也会出现。一旦将任何图像绘制到画布中，整个画布将变得无法访问乐。

<!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>