Canvas Получить изображение Данные, возвращаемые 0 всегда

Question

Я пытаюсь инвертировать цвет изображения. Теперь изображение загружается нормально, но когда я пытаюсь вызвать getImageData и putImageData обратно на холст. Холст просто пуст. Затем я распечатал все imageData, похоже, что он всегда 0 по какой-то причине. Я серьезно обеспокоен этим. Пожалуйста, помогите и THX заранее!

window.onload = function() { 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    var img = new Image(); 
    img.src = "hand.jpg"; 
    img.onload = function() { 
     ctx.drawImage(img, 10, 10,50,50); 
    } 

    var imgData = ctx.getImageData(10,10,50,50); 
    console.log(imgData.data.toString()); //return 0's 
    for (var i=0;i<imgData.data.length;i+=4) 
    { 
     imgData.data[i]=255-imgData.data[i]; 
     imgData.data[i+1]=255-imgData.data[i+1]; 
     imgData.data[i+2]=255-imgData.data[i+2]; 
     imgData.data[i+3]=255; 
    } 
    ctx.putImageData(imgData,100,100); 
} 

Answer 1

Вы должны ждать изображения для загрузки

window.onload = function() { 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    var img = new Image(); 
    img.src = "hand.jpg"; 
    //================================================================ 
    // this event will only get called after you have returned from this function 
    img.onload = function() { 
     ctx.drawImage(img, 10, 10,50,50); 
    } 
    //================================================================ 
    // The image has not loaded at this point 
    // the following code will always be working on an empty canvas 

    var imgData = ctx.getImageData(10,10,50,50); 
    console.log(imgData.data.toString()); //return 0's 
    for (var i=0;i<imgData.data.length;i+=4) 
    { 
     imgData.data[i]=255-imgData.data[i]; 
     imgData.data[i+1]=255-imgData.data[i+1]; 
     imgData.data[i+2]=255-imgData.data[i+2]; 
     imgData.data[i+3]=255; 
    } 
    ctx.putImageData(imgData,100,100); 

    //================================================================ 
    // onload will fire after this point 
} 

Чтобы исправить

window.onload = function() { 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    var img = new Image(); 
    img.src = "hand.jpg"; 
    img.onload = function() { 
     ctx.drawImage(img, 10, 10,50,50); 

     var imgData = ctx.getImageData(10,10,50,50); 
     for (var i=0;i<imgData.data.length;i+=4){ 
      imgData.data[i]=255-imgData.data[i]; 
      imgData.data[i+1]=255-imgData.data[i+1]; 
      imgData.data[i+2]=255-imgData.data[i+2]; 
      imgData.data[i+3]=255; 
     } 
     ctx.putImageData(imgData,100,100); 
    } 
} 

BTW вы можете инвертировать цвета изображения с

ctx.globalCompositeOperation = "difference"; 
ctx.fillStyle = "white" 
ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height); 
ctx.globalCompositeOperation = "source-over"; // restore default