image - Chrome 不读取画布上的图像

Question

我正在尝试从 javascript 读取图像并将其加载到 html 5 canvas 元素。这在 ubuntu mozilla 和 andriod 移动浏览器中工作得很好，但 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 元素的代码。

Answer 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;