0

コントロールを使用<input type='file' onchange="readURL(this)"/>して、画像を Web サービスにアップロードしています。ここではcanvas、画像サイズを縮小するために使用しています。コードは正常に動作していますが、最初に画像をアップロードしようとすると空白の画像が送信され、2 回目の試行で最初の画像が送信されます。つまり、キャンバスに画像がいつ描画されたかを知らせるキャンバスのイベントが必要です

function readURL(input) {
    if (input.files && input.files[0]) {
        var canvas = document.getElementById('canvas1');
        var context = canvas.getContext('2d');
        var reader = new FileReader();
        reader.onload = function (e) {
            var imageObj = new Image();                  
            imageObj.onload = function () {
                context.drawImage(imageObj, 0, 0, 300, 275);
            };
            imageObj.src = e.target.result.toString();

            $.ajax({
                 //My Web Service call code
            });                 
        }
        reader.readAsDataURL(input.files[0]);
    }
}

質問は、HTML5 キャンバスに、画像が描画されたことを示すイベントはありますか?

4

2 に答える 2

1

$.ajax呼び出しをonload画像のハンドラー内に移動する必要があります。

var imageObj = new Image();                  
imageObj.onload = function () {
    context.drawImage(imageObj, 0, 0, 300, 275);

    $.ajax({
         //My Web Service call code
    });
};
imageObj.src = e.target.result.toString();

書かれたコードは、画像が読み込まれる前に Ajax 呼び出しを行っていましたが、読み込みが行われるまで画像はキャンバスに描画されませんでした。

于 2013-06-19T19:43:44.463 に答える
1

reader.onloadendreader.onload の代わりに使用してみてください。

ところで、関係のない問題ですが、Chrome には、new Image() を使用するとトリップする新しいバグがあります。

代わりに、alternate: を使用すると問題ありませんdocument.createElement("img")。

最後に (重要ではありませんが)、画像ファイルを扱っているので、reader.readAsDataURLFileReader のオプションを調べることができます。

于 2013-06-19T19:43:06.570 に答える