0

我正在尝试反转图像的颜色。现在图像加载正常，但是当我尝试调用 getImageData 和 putImageData 回到画布上时。画布只是空白。然后我打印出所有的imageData，由于某种原因，它看起来总是为0。我对此感到非常困扰。请提前帮助和谢谢！

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

4

1 回答 1

3

您需要等待图像加载

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

顺便说一句，您可以使用反转图像颜色

ctx.globalCompositeOperation = "difference";
ctx.fillStyle = "white"
ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.globalCompositeOperation = "source-over"; // restore default
于 2016-09-19T23:11:30.740 回答