Chrome에서 캔버스의 이미지를 읽지 못합니다.

Question

javascript에서 html 5 canvas 요소로 이미지를 읽고로드하려고합니다. 이것은 우분투 모질라와 andriod 모바일 브라우저에서 잘 작동하지만 우분투 크롬은 나에게 이미지를 보여주지 않습니다. 내 코드는 다음과 같습니다.

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(); 
} 

내가 잘못 어떤 일을하거나 그냥 단지 it..I의 재미를 위해 나와 함께 장난 크롬 아래 캔버스와 IMG 요소와 코드를 부착입니다입니다.

Answer 1

일부 버전에서는 실패한 new Image과 관련된 Chrome 버그가 발생할 수 있습니다 (Windows 7에서는 a known issue 버전 27.0.1453.94m 포함).

대신 해결 방법 다음 사용 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;