更改画布上的像素。这是行不通的

Question

代码JavaScript

var imgWidth,imgHeight,datosPrint;
    window.onload = function(){
        /*canvas,ctx,img...*/
        ctx.drawImage(img,0,0,imgWidth,imgHeight);
        var datosDeLaImagen = ctx.getImageData(0,0,imgWidth,imgHeight);
        datosPrint = datosDeLaImagen.data;
        invertirColores(canvas,ctx);
    };

ctx.getImageData不起作用。为什么呢？

Answer 1

您不只是操纵数据对象并查看更改，您必须在完成后将操作重新置于上下文中。

var imgWidth,imgHeight,datosPrint;
    window.onload = function(){
        /*canvas,ctx,img...*/
        ctx.drawImage(img,0,0,imgWidth,imgHeight);
        var datosDeLaImagen = ctx.getImageData(0,0,imgWidth,imgHeight);
        datosPrint = datosDeLaImagen.data;
        invertirColores(canvas,ctx);
        ctx.putImageData(datosPrint, 0, 0)
    };

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData