Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to learn canvas and achieve filter effect in html". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to learn canvas and achieve filter effect in html".

In this era of rampant digital products, photography has become an indispensable part of life, whether at home, hiking, or long-distance travel, always take some beautiful photos. But the photos directly taken by the camera often have a certain gap with our psychological expectations, so how to reduce this gap? The answer is Beauty Picture, so all kinds of Beauty cameras come everywhere, and P Map has become a portable skill.

In fact, the so-called beauty is just the combined use of many filters, and the filter is through a certain algorithm to manipulate picture pixels to get some special image effects. Friends who have used Photoshop know that there are a lot of filters in ps. Here we will use js's canvas technology to achieve several filter effects.

1 know canvas?

1.1 what is canvas?

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

1.2 what is the difference between canvas, svg and vml?

An important difference between tags and SVG and VML is that there is a JavaScript-based drawing API, while SVG and VML use an XML document to describe drawings.

2 canvas drawing learning

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

2.1 canvas draw rectangle

/ deal with canvas elements var c = document.querySelector ("# my-canvas"); c.width = 150 position c. Height = 70 c.getContext / get the context object var ctx = c.getContext ("2d") on the specified context tag; ctx.fillStyle = "# FF0000"; / / Color ctx.fillRect (0,0,150,75); / / shape

2.2 canvas drawing path

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 now

2.3 canvas draws a circle

For the interface ctx.arc (), the five parameters are: (XMagneyPersonrMagneStart stop). Where x and y are the center coordinates and r is the radius.

The units of start and stop are radians. It's not a length, it's not a °.

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

2.4 canvas drawing text

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

3 canvas image processing learning

3.1Common API interfaces

With regard to image processing API, 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 (xrec yrew widthdepartment height)

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

Export image: toDataURL ([type, encoderOptions])

For more detailed descriptions of API and parameters, please see: canvas Image processing API parameters explanation

3.2 drawing an Ima

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

_ window.onload = function () {var img = new Image () / declare the new Image object img.src = ". / img/photo.jpg" / / img.onload = function () {var canvas = document.querySelector ("# my-canvas"); var ctx = canvas.getContext ("2d") / / according to image size, specify canvas size canvas.width = img.width canvas.height = img.height / / draw image ctx.drawImage (img, 0, 0, canvas.width, canvas.height)}}

4 realize the filter

Here we mainly borrow the getImageData function, which returns the RGBA value of each pixel. With the help of the image processing formula, the operation pixel can be operated accordingly and mathematically.

4.1 decolorization effect

The decolorization effect is equivalent to the black-and-white photos taken by the old camera. According to the sensitivity of human eyes, the following formulas are given:

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

The code is as follows:

_ 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] stores alpha and does not 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}}

4.2 negative color effect

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

New_val = 255-val

The code is as follows:

_ 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 and does not 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}} so far, I believe you have a deeper understanding of "how to learn canvas and achieve filter effects in html". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.