3

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

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

2 回答 2

3

@Derek 和 @robertklep 是正确的：

  • 调用后绘制图像toDataURL；接着
  • SecurityError: DOM Exception 18

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

http://jsfiddle.net/c24w/E3SPv/

于 2013-03-26T16:28:23.273 回答
3

toDataURL在图片加载之前执行。尝试将其放入 onload 函数中。

此外，由于Same Origin Policy，您不能使用来自其他域的图像，它会抛出SecurityError：

未捕获的错误：SecurityError：DOM 异常 18

现在这将起作用：http://jsfiddle.net/DerekL/qS9qP/2/show/

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
于 2013-03-26T16:17:08.607 回答