Image filter for canvas pixel operation

Figure after filter:

Implementation principle:

This uses a method of canvas: getImageData , this method can obtain the pixel information of the picture

**CanvasRenderingContext2D**.getImageData(), return a ImageData Constructor to create or use the creation methods of the CanvasRenderingContext2D object with canvas: createImageData() and getImageData(). You can also use putImageData() to set part of the canvas. ") object, which is used to describe the hidden pixel data of canvas area. This area is represented by a rectangle. The starting point is (sx, sy), the width is sw, and the height is sh.

We need to use the data attribute of the return object in data, which is a large array containing the information of each pixel. Among them, a pixel is represented by four bits, that is, four bits make up a pixel, which are rgba, r: 0 ~ 255, g: 0 ~ 255, b: 0 ~ 255, a: 0~255,alpha channel is generally 0 ~ 1, but it is also represented by 0 ~ 255 for convenience.
For example, the first pixel rgba of the original image is 0, 17, 43, 0, which corresponds to data[0]=0,data[1]=17,data[2]=43,data[4]=255, the second pixel is the same, and so on.

OK, so if we get the value of these pixels and want to implement the filter operation, we just need to modify the value of these pixels, such as making the picture yellow, then we don't need the value of b in rgba.
For the sake of user's security, getImageData can't read the local pictures, but can only read the files of the server. We can access it with wamp (put your html file and picture file in the www directory of the installed wamp file, and enter localhost / your directory / file name in the address bar of the local tourist).

<canvas width="800" height="600" style="background:white;"></canvas>

Create a new picture object:

let c1 = document.getElementsByTagName('canvas')[0];
let gd = c1.getContext('2d');
let img=new Image();
img.src='images/1.jpg';

Start drawing after image loading:

img.onload=function(){
    gd.drawImage(img,-500,0);
}

Get imageData object:

    let imgArr=gd.getImageData(0,0,c1.width,c1.height);

Change all b in rgba to 50:

for(let r=0;r<c1.height;r++){
    for(let c=0;c<c1.width;c++){
           imgArr.data[4*(r*c1.width+c)+2]=50;
}
}

imgArr.data[4*(r*c1.width+c)+2]=50;
The meaning of this sentence is to change the value of b (blue) of each pixel to 50, which should be that each pixel has 4 bits, and each row * width of canvas + how many columns + 2 is the value of b of each pixel;

After the update, you need to set it back:

gd.putImageData(imgArr,0,0);

Full code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background: gray;
            text-align: center;
        }
    </style>
    <script>
        window.onload = function () {
            let c1 = document.getElementsByTagName('canvas')[0];
            let gd = c1.getContext('2d');
            let img=new Image();
            img.src='images/1.jpg';
            img.onload=function(){
                gd.drawImage(img,-500,0);
                let imgArr=gd.getImageData(0,0,c1.width,c1.height);

                for(let r=0;r<c1.height;r++){
                    for(let c=0;c<c1.width;c++){
                        imgArr.data[4*(r*c1.width+c)+2]=50;
                    }
                }
                gd.putImageData(imgArr,0,0);
            }
        }
    </script>
</head>
<body>
    <canvas width="800" height="600" style="background:white;"></canvas>
</body>
</html>

Posted by undertaker16 on Fri, 18 Oct 2019 18:04:01 -0700

Programmer Group

Image filter for canvas pixel operation

Implementation principle:

Hot Keywords