Canvas is really a magical thing. It can not only draw various graphics, text and bitmaps, but also perform complex pixel operations and processing on bitmaps. Therefore, things like filters can actually be implemented using Canvas. Next, it’s time to witness a miracle.
First, we need to have a Canvas container, for example:
<canvas id=myCanvas width=800 height=800></canvas>
Next, we need to use Canvas to draw a picture:
var myCanvas = document.getElementById(myCanvas);var ctx = myCanvas.getContext(2d);var img = new Image();img.src = ./images/1526010092000.jpg;// Prepare your own image link img.onload = (e) => {ctx.drawImage(img, 0, 0, 800, 800);//The first 800 represents the width of the drawn picture, and the second 800 represents the height of the drawn picture}The effect of the first drawing of Canvas
The next step is to perform some operations on the pixels of the image. To implement such an operation, you first need to obtain the pixel information of the image from Canvas, and obtaining this information can be achieved through getImageData() .
// ... Omit the previous code img.onload = (e) => {// ... Omit the previous code img = ctx.getImageData(0, 0, 800, 800); // Obtain the color of each pixel byte data}Since the size of the picture is 800 * 800, the pixels need to be traversed to obtain the red, green, and blue values of each pixel. therefore:
// ... Omit the previous code img.onload = (e) => {// ... Omit the previous code var pixelLen = 800 * 800; // Get the number of pixels for(var i = 0; i < pixelLen * 4; i += 4) { var redC = img.data[i], // The first byte unit represents red greenC = img.data[i + 1], // The second byte unit represents green blueC = img.data[i + 2], // The third byte unit represents blue alpha = img.data[i + 3]; // The fourth byte unit represents transparency}}Through the above loop, we obtain the specific color value of each pixel contained in the image data; one thing to note is that the data of each pixel is not one bit, but four adjacent bits, which respectively represent the The red, green, blue, and transparency values of the point. Therefore, in fact, the array length of bitmap byte data is equal to the number of pixels multiplied by 4. In the for loop, we also deal with this feature accordingly.
By averaging the red, green, and blue values of each point, and then assigning the generated average value to the red, green, and blue values of the pixel, a grayscale effect can be formed. Finally, putImageData() method is used to re- Just draw the picture, the code is as follows:
// ... Omit the previous code img.onload = (e) => { // ... Omit the previous code for(var i = 0; i < pixelLen * 4; i += 4) { // ... Omit the previous code var gray = parseInt((redC + greenC + blueC) / 3); // Obtain the gray value after averaging img.data[i] = gray; // Change the red value img.data[i + 1] = gray; // Change the green value img.data[i + 2] = gray; // Change the blue value} ctx.putImageData(img, 0, 0, 800, 800); // Redraw the image}At this time, a grayscale effect will be formed, as shown below
Canvas draws the picture for the second time - grayscale effect
To control transparency, you only need to modify the value corresponding to the fourth byte unit. The value range is 0~256, 0 represents complete transparency, and 256 represents complete opacity. For example:
// ... Omit the previous code img.onload = (e) => { // ... Omit the previous code for(var i = 0; i < pixelLen * 4; i += 4) { // ... Omit the previous code img.data[i + 3] = 128; // Transparency 50% } // ... Omit the previous code }Canvas third drawing effect-increase transparency
From this, by controlling the value of 4 data for each pixel in the picture, the effect of the filter can be achieved. Isn't it so easy!
References:
"HTML5 Basic Knowledge, Core Technologies and Cutting-edge Cases" edited by Liu Huan
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.