How to make pictures black and white with JavaScript_javascript skills

This article mainly introduces the JS implementation code for black and white images. Now I share it with you. Friends who need it can refer to it

HTML5 introduced the element, which allows us to use js Dynamically draw images in the area. This time we made the image black and white by using js to operate the element.

Let’s take a look at the renderings first

The img tag is on the left and the canvas element tag is on the right. The structure is as follows

<img  src="/static/imghwm/default1.png"  data-src="1.jpg"  class="lazy"     style="max-width:90%"/ alt="How to make pictures black and white with JavaScript_javascript skills" >
<canvas id="drawing" width="200" height="199" ></canvas>

The code of JS is very simple, with only more than 20 lines. However, in line with the attitude of teaching people to fish rather than teaching people to fish, the source code will be posted at the bottom. Let’s talk about the theory first.

1. About pictures

Everyone should know that the so-called picture is composed of pixels, that is to say, a picture of 300*300 size. There are 300*300 pixels in total, and each pixel is composed of three primary colors (red, green, blue) plus transparency (alpha). So if we want to change the image data of the image, we actually change the data of each pixel of the image.

2. About API

We can get the canvas object through var drawing = document.getElementById('drawing'); The canvas object provides two drawing methods, 2D and 3D. Here we use 2D drawing
Use the context2d = drawing.getContext('2d'); method to obtain the context2d object. After getting the context2d object, we obtain the image data through the method getImageData() provided by context2d. getImageData() has 4 parameters, which respectively represent the x and y coordinates of the screen area and the pixel width and height of the area var imagedata = context2d.getImageData(0, 0, image.width, image.height); <br>

The ImageData object has three properties: width, height and
data. The data attribute is an array that stores the data of each pixel in the image. And represented by, red, green, blue, alpha. Then if we want to change the image data of the image, we need to change the data attribute data of imagedata and change the values ​​​​of red, green, blue, and alpha.

Here is the source code

function drawImageData () {
      var context2d = null;
      if(drawing.getContext) {
        context2d = drawing.getContext('2d');
      }
      if (context2d == null) {
        return;
      }
      var image = document.images[0];
      context2d.drawImage(image, 0 , 0);
      var imagedata = context2d.getImageData(0, 0, image.width, image.height);
      var data = imagedata.data;
      console.log('data: ' + data);
      var i,len,red,green,blue,alpha,average;
      for (i = 0 , len = data.length; i < len; i+=4) {
        red = data[i];
        green = data[i + 1];
        blue = data[i + 2];
        alpha = data[i + 3];
        average = Math.floor((red + green + blue) / 3);
        data[i] = average; 
        data[i+1] = average; 
        data[i+2] = average;
      }
      imagedata.data = data;
      context2d.putImageData(imagedata, 0, 0);
    }

Related recommendations:

Code detailed explanation of how JavaScript can achieve fast speed Sorting

How does JavaScript implement bubble sorting in an encapsulated manner

Detailed explanation of JavaScript operating mechanism and conceptual analysis

The above is the detailed content of How to make pictures black and white with JavaScript_javascript skills. For more information, please follow other related articles on the PHP Chinese website!