Javascript 为什么不从画布上传输图像_Javascript

Javascript 为什么不从画布上传输图像

javascript

Javascript 为什么不从画布上传输图像,javascript,Javascript,我正在尝试将图像从画布转换为图像，可以通过右键单击鼠标保存。一切正常，但如果我将图像放在画布上（drawImage），图像不会被传输。左边的图像是，而不是右边。为什么？我还在沙箱中放了一个例子 var canvas=document.getElementById（“myCanvas”）； var ctx=canvas.getContext（“2d”）； ctx.fillStyle=“rgb（200,0,0）”； ctx.fillRect（10,10,55,50）； var img=新图

我正在尝试将图像从画布转换为图像，可以通过右键单击鼠标保存。
一切正常，但如果我将图像放在画布上（drawImage），图像不会被传输。
左边的图像是，而不是右边。
为什么？
我还在沙箱中放了一个例子


var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“rgb（200,0,0）”；
ctx.fillRect（10,10,55,50）；
var img=新图像（）；
img.onload=函数（）{
ctx.drawImage（img，10，10）；
}
img.src=”http://www.cisco.com/favicon.ico"
//将画布转移到图像
document.images[0].src=document.getElementById（“myCanvas”）.toDataURL（“image/png”）；

toDataURL

在加载图片之前执行。尝试将其置于onload函数中

此外，您不能使用来自其他域的图像，因为，它将抛出一个

SecurityError

：

未捕获错误：安全错误：DOM异常18

现在这将起作用：

@德里克和@robertklep是正确的：

在调用
```
toDataURL
```
后绘制图像；然后
```
SecurityError:DOM异常18
```

跨域问题在某种程度上超出了这个问题的范围，但为了证明这一点，可以按照您的预期（通过消除

DOM异常

）：

你说得很对，但我认为这只是问题的一部分。另一个问题是浏览器可能会认为这是一个跨域请求，而<>代码> toDATAURL 会引发一个异常。谢谢大家。你完全正确。我的错误是没有注意到跨域问题。事实证明，即使在本地磁盘上打开文件时，也会发生跨域问题！然后我想做一个环球的例子，把这个链接放到cisco.com上。当然，主要问题是文件没有时间加载。我会小心的。不幸的是，我不能对两个答案都给出公认的答案。对不起，没问题@Derek首先注意到了一个基本问题：）如果你在标签画布中添加一个隐藏的属性，这个例子的用处就会变得很清楚。我们得到了一个可以右击存储的图像画布。

 <body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <img src="f2.ico"/>
  </body>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);

var img=new Image();
img.onload = function(){
        ctx.drawImage(img, 10, 10);
   }
img.src="http://www.cisco.com/favicon.ico"
// transfer canvas to image
document.images[0].src=document.getElementById("myCanvas").toDataURL("image/png");

</script>

var img = new Image();
img.onload = function () {
    ctx.drawImage(img, 10, 10);
    document.images[0].src = canvas.toDataURL("image/png");    //Put it inside
}
img.src = "http://jsfiddle.net/img/logo.png"                   //Same domain