Canvas learning and filter implementation code

In this era of proliferation of digital products, taking pictures has become an indispensable part of life. Whether you are at home, outing, or traveling far away, you will always take some beautiful photos. But the photos taken directly by the camera often have a certain gap between them and our psychological expectations. So how to reduce this gap? The answer is beauty P-pictures, so all kinds of beauty cameras are popping up, and P-pictures have become a portable skill.

In fact, the so-called beauty is nothing more than the combined use of many filters, and filters use certain algorithms to manipulate image pixels to obtain some special image effects. Friends who have used Photoshop know that there are a lot of filters in PS. Below we will use js canvas technology to achieve several filter effects.

Recently I learned the highlight of HTML5 - canvas . Using canvas, front-end personnel can easily perform image processing. There are many APIs. This time I will mainly learn the commonly used APIs and complete the following two codes:

• Implement decolorization filter
• Implement negative color (reverse color) filter

This HTML element is designed for client-side vector graphics. It has no behavior of its own, but exposes a drawing API to client JavaScript so that the script can draw whatever it wants to a canvas.

An important difference between <canvas> tag and SVG and VML is that <canvas> has a JavaScript-based drawing API, while SVG and VML use an XML document to describe drawing.

Most of the Canvas drawing API is not defined on the <canvas> element itself, but is defined on a drawing environment object obtained through the canvas's getContext() method. The default width and height of the <canvas> element itself are 300px and 150px respectively.

 // Process the canvas element var c = document.querySelector(#my-canvas);c.width = 150;c.height = 70; // Get the context object on the specified canvas tag var ctx = c.getContext(2d); ctx.fillStyle = #FF0000; // Color ctx.fillRect(0, 0, 150, 75); // Shape

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.moveTo(0, 0); //Start coordinate ctx.lineTo(200, 100); //End coordinate ctx .stroke(); // Draw immediately

For ctx.arc() interface, the five parameters are: (x,y,r,start,stop) . Among them, x and y are the coordinates of the center of the circle, and r is the radius.

The units of start and stop are radians . Not length, not degrees.

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.beginPath();ctx.arc(95, 50, 40, 0, 2 * Math.PI);ctx. stroke();

 var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);ctx.font = 30px Arial;ctx.fillText(Hello World, 10, 50);

Regarding image processing APIs, there are mainly four:

Draw an image: drawImage(img,x,y,width,height) or drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

Get image data: getImageData(x,y,width,height)

Rewrite image data: putImageData(imgData,x,y[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

Export image: toDataURL([type, encoderOptions])

For more detailed API and parameter descriptions, please see: Canvas Image Processing API Parameters Explanation

Based on these APIs, we can draw our pictures in the canvas element. Suppose our picture is ./img/photo.jpg .

 <script> window.onload = function () { var img = new Image() // Declare a new Image object img.src = ./img/photo.jpg // After the image is loaded img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = canvas.getContext(2d); // According to the image size, specify the canvas size canvas.width = img.width canvas.height = img.height // Draw the image ctx.drawImage(img, 0, 0, canvas.width, canvas.height) } }</script>

As shown in the figure below, the picture is drawn into the canvas:

Here we mainly borrow the getImageData function, which returns the RGBA value of each pixel. With the help of image processing formulas, you can manipulate pixels to perform corresponding mathematical operations.

The color removal effect is equivalent to the black and white photos taken by old cameras. Based on the sensitivity of the human eye, people have given the following formula:

gray = red * 0.3 + green * 0.59 + blue * 0.11

The code is as follows:

 <script> window.onload = function () { var img = new Image() img.src = ./img/photo.jpg img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = canvas.getContext(2d); canvas.width = img.width canvas.height = img.height ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // Start filter processing var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); for (var i = 0; i < imgData.data .length / 4; ++i) { var red = imgData.data[i * 4], green = imgData.data[i * 4 + 1], blue = imgData.data[i * 4 + 2]; var gray = 0.3 * red + 0.59 * green + 0.11 * blue; // Calculate gray // Refresh RGB, note: // imgData.data[i * 4 + 3] is stored is alpha, no need to change imgData.data[i * 4] = gray; imgData.data[i * 4 + 1] = gray; imgData.data[i * 4 + 2] = gray; } ctx.putImageData(imgData, 0, 0); // Rewrite image data} }</script>

The effect is as shown below:

4.2 Negative color effect

The negative color effect is to subtract the current value from the maximum value. The theoretical maximum numerical value in RGB obtained by getImageData is: 255. So, the formula is as follows:

new_val = 255 - val

The code is as follows:

 <script> window.onload = function () { var img = new Image() img.src = ./img/photo.jpg img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = canvas.getContext(2d); canvas.width = img.width canvas.height = img.height ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // Start filter processing var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); for (var i = 0; i < imgData.data .length / 4; ++i) { var red = imgData.data[i * 4], green = imgData.data[i * 4 + 1], blue = imgData.data[i * 4 + 2]; // Refresh RGB, note: // imgData.data[i * 4 + 3] stores alpha, no need to change imgData.data[i * 4] = 255 - imgData .data[i * 4]; imgData.data[i * 4 + 1] = 255 - imgData.data[i * 4 + 1]; imgData.data[i * 4 + 2] = 255 - imgData.data[i * 4 + 2]; } ctx.putImageData(imgData, 0, 0); // Rewrite image data} }</script>

The renderings are as follows:

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.