0

dataurl を使用してキャンバスを画像に変換する作業を行っています。コンソールにエラーを出力しない次のコードがあります。多少は動くようですが、dataurl にアクセスすると空白の画像が表示されます。

window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var imageObj = new Image();

    imageObj.onload = function() {
        var myImage = context.drawImage(imageObj, 0, 0);        
        var myImg = canvas.toDataURL("image/png");
        document.getElementById("canvasimg").setAttribute("src", myImg);
    };
    imageObj.src = "http://img801.imageshack.us/img801/5641/3cc67ca1a74049ce99bc92b.png";
};

<canvas id="myCanvas" width="578" height="400"></canvas>
<img id="canvasimg" alt="" src="">
4

2 に答える 2

1

あなたがしていることを見てください。画像の読み込み時に画像を描画していますが、画像が描画される前にデータ URL に変換しています! toDataURLその呼び出しと呼び出しをsetAttribute関数内に移動しonloadます。

于 2012-06-04T01:49:13.670 に答える
1

投稿したコードをテストすると、セキュリティ エラーが発生します。これは予想されることです。キャンバスには clean-origin フラグがあり、そのフラグが false になると、そこからデータを引き出すことはできません。

これは、より詳細な関連する質問です

回答にリンクされているドキュメント

于 2012-06-04T02:28:46.917 に答える