Canvas learning from 0 (I)

Canvas learning from 0 (ii)

Following the previous method of drawing an image or video onto the canvas

Now, if we want to make the video or image look like we want to make it black and white or make the color contrast more obvious, we can use the two apis of getImageData() and putImageData() to do so

According to the effect

Briefly describe the API to use

getImageData()

Take the pixel data out of the canvas

putImageData()

Fill the canvas with color values

About the process

  1. Get the canvas element and draw the image onto the canvas
  2. Pass after drawinggetImageDataGet pixel data in canvas (RGB color value)
  3. The acquired data will be processed through after completionputImageDataBack on the canvas
The first step
 var ctx = myCanvas.getContext('2d')
        var myImage = new Image()
        myImage.src = 'https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/56a409021bf987376f220b475cd7a024~300x300.image'
        myImage.crossOrigin = 'Anonymous' // Add this line
        myImage.onload = function () {
            myCanvas.width = myImage.width
            myCanvas.height = myImage.height
            ctx.drawImage(myImage, 0.0, myImage.width, myImage.height)
            showImage.src = myCanvas.toDataURL("image/png")}Copy the code
The second step

In this step we can through the console. The log (imageData. Data. Length, myimage.png width * myimage.png height * 4) It is known that the total pixel data is equal to width * height *4, so it can be judged that the array data is distributed in a group of three, representing R, G and B

For an understanding of RGB, see the article hexadecimal colors

var imageData = ctx.getImageData(0.0, myImage.width, myImage.height)
console.log(imageData.data.length,myImage.width * myImage.height * 4)
for (let i = 0; i < imageData.data.length; i += 4) {
    var r = imageData.data[i]
    var g = imageData.data[i + 1]
    var b = imageData.data[i + 2]
    imageData.data[i] = ((r + g + b) / 3)
    imageData.data[i + 1] = ((r + g + b) / 3)
    imageData.data[i + 2] = ((r + g + b) / 3)}Copy the code
The third step
ctx.putImageData(imageData, 0.0)
Copy the code

All code

<canvas id="myCanvas">

</canvas>
<img id="showImage" />
 <script>
        var ctx = myCanvas.getContext('2d')
        var myImage = new Image()
        myImage.src = 'https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/56a409021bf987376f220b475cd7a024~300x300.image'
        myImage.crossOrigin = 'Anonymous' // Add this line
        myImage.onload = function () {
            myCanvas.width = myImage.width
            myCanvas.height = myImage.height
            ctx.drawImage(myImage, 0.0, myImage.width, myImage.height)
            showImage.src = myCanvas.toDataURL("image/png")
            var imageData = ctx.getImageData(0.0, myImage.width, myImage.height)
           
            for (let i = 0; i < imageData.data.length; i += 4) {
                var r = imageData.data[i]
                var g = imageData.data[i + 1]
                var b = imageData.data[i + 2]
                imageData.data[i] = ((r + g + b) / 3)
                imageData.data[i + 1] = ((r + g + b) / 3)
                imageData.data[i + 2] = ((r + g + b) / 3)
            }
            ctx.putImageData(imageData, 0.0)}</script>
Copy the code

The video is processed in the same way as his. We can modify the operation in the second step to achieve the desired effect

Wechat small program to achieve

It can be seen that the official also provides corresponding methods, which can be realized by referring to the previous chapter and combining with the content here

after

There are expected to be articles on cutting images from a canvas and exporting a clip of a video into a GIF