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

toDataURL画像が読み込まれる前に実行されます。onload関数に入れてみてください。

また、同一生成元ポリシーのため、他のドメインの画像を使用することはできません。また、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 に答える
3

@Derekと@robertklepは正しいです：

  • 画像はtoDataURL通話後に描画されます。その後
  • SecurityError: DOM Exception 18

クロスドメインの問題は、この質問の範囲をいくらか超えていますが、要点を示すために、これを期待どおりに機能させることができます（を削除することによりDOM Exception）。

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

于 2013-03-26T16:28:23.273 に答える