JS operation picture black and white

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

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!