1

javascript から html 5 キャンバス要素に画像を読み込んでロードしようとしています。これは、ubuntu mozilla および android モバイル ブラウザでは問題なく動作しますが、ubuntu chrome では画像が表示されません。私のコードは次のとおりです。

 function readImage() 
 {  
     var img = new Image();
     var c=document.getElementById("myCanvas");
     var ctx=c.getContext("2d");
     img.src = "img/1.jpg";
     img.onload = function ()
     {      
          ctx.drawImage(img,0,0);
     };     
}

 window.onload = function (){
    readImage();
 }

私は何か間違ったことをしているのですか、それとも単なる楽しみのためにクロムが私をいじっているだけですか..キャンバスとimg要素を含むコードを以下に添付しました。ここに画像の説明を入力

4

1 に答える 1

1

new Image一部のバージョンで失敗することに関連する Chrome のバグが発生する可能性があります ( Windows 7 のバージョン 27.0.1453.94 m を含む既知の問題)。

document.createElement()代わりに次の回避策を試してください。

function readImage() {  

     var img = document.createElement('img'); // this will work in Chrome too

     var c=document.getElementById("myCanvas");
     var ctx=c.getContext("2d");

     img.onload = function() {      
          ctx.drawImage(img,0,0);
     };
     img.src = "img/1.jpg";  // put src after onload
}

window.onload = readImage;
于 2013-08-28T05:29:41.393 に答える