2

base64 画像データを src として画像オブジェクトに割り当てて、キャンバスにチェックボックス画像を描画しようとしています。IE では正常に動作しますが、Firefox と Chrome では一貫性のない結果が得られます。これが私のコードです。

    img = document.createElement('img');
    img.src = 'data:image/gif;base64,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';
    ctx.drawImage(
        img,
        sx, 
        sy, 
        sw, 
        sh, 
        dx, 
        dy, 
        dw, 
        dh      
        );

src を画像に割り当てた後にアラートを出すと、FF と chrome でも動作します。完全な src が画像に割り当てられる前に、描画プロセスが行われ、完全な画像が得られないため、JavaScript の非同期動作が原因だと思います。この問題の処理方法を教えてください。

4

1 に答える 1

1

画像を描画する前に、画像のonLoadイベントを待ってみてください。また、src属性を割り当てる前に、必ずハンドラーを追加してください。

 img = document.createElement('img');
 img.onload = function() {
    ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
 };
 img.src = 'data:image/gif;base64,R0lGO...OFYDEWHDswIAA7';

また、これを試してください（ほとんどのブラウザーでは、まったく同じ結果になるはずですが、一部の古いブラウザーでは、いずれかの方法に問題があります）。

 var img = new Image();
 img.onload = function() { 
    ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
 }
 img.src = "data:img/gifx;base64....";

それでもFirefoxとChromeでこれが一貫して機能しない場合は、画像をDOMに追加して、違いが生じるかどうかを確認してください。

 img = document.createElement('img');
 document.body.appendChild(img);
 img.onload = function() {
    ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
 };
 img.src = 'data:image/gif;base64,R0lGO...OFYDEWHDswIAA7';
于 2012-07-31T07:11:11.710 に答える