JS operation picture black and white

This time I will bring you black and white JS operation pictures. What are the precautions for black and white JS operation pictures? 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.

Let’s take a look at the renderings first

The left side is the

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

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

JS is very simple, with only more than 20 lines. However, in line with the attitude of teaching people how 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. Regarding API

we use

var drawing = document<a href="http://www.php.cn/code/658.html" target="_blank">.getElementById('drawing')</a>; this method You can get the canvas object. 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, which 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 use and disable the vue select component

Avoid re-rendering when using React

The above is the detailed content of JS operation picture black and white. For more information, please follow other related articles on the PHP Chinese website!