Use JS to manipulate images, leaving only black and white

This time I will bring you some precautions when using JS to manipulate images to leave only black and white. The following is a practical case. Let’s take a look.

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

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

<img src="1.jpg" style="width: 200px; height: 199px"/>
<canvas id="drawing" width="200" height="199" ></canvas>

The JS code is very simple, with only more than 20 lines, but in the spirit of teaching people It is better to teach people how to fish than 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);

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to remove duplicates in JS when merging multiple arrays

How to operate the WeChat applet api with promise

The above is the detailed content of Use JS to manipulate images, leaving only black and white. For more information, please follow other related articles on the PHP Chinese website!