JS black-and-white settings for pictures

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>

1. About pictures

2. Regarding API

var drawing = document<a href="//m.sbmmt.com/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);

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.

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

What steps are needed to determine the type and size of uploaded images

How to remove duplicates when merging multiple arrays Data

#Detailed explanation of the use of React props and state attributes

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