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

This article mainly introduces how canvas through pixel processing to achieve reverse color, black and white and other beauty effects, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

GetImageData: get the pixel data of an image

Cxt.getImageData (x, y, width, height)

X: the x coordinate where the picture is located

Y: the y coordinate of the picture

The pixel area to be acquired by width,height

The return value is an object, which includes a data property, width, and height. The data attribute is a huge array that stores all the pixel information of the picture, each of which consists of four pixels, such as:

[r1rect g1rect b1rect a1, R2 recorder g2rect b2rect a2...], r (red) g (green) b (blue) a (transparency)

PutImageData: output pixel pictures

PutImageData (Pixel object, x, y)

Note: getImageData will cause cross-domain problems, so your program should be placed under the web server, I put it here under the phpstudy.

one

two

three

four

five

6 # canvas {

7 border: 1px dashed # aaa

8}

nine

ten

11 _ window.onload = function () {

12 var oCanvas = document.querySelector ("# canvas")

13 oGc = oCanvas.getContext ('2d')

fourteen

15 var oImg = new Image ()

16 oImg.src =''

17 oImg.onload = function () {

18 oGc.drawImage (oImg, 10,10)

19 var imgData = oGc.getImageData (10,10,200,200)

20 console.log (imgData)

21}

22}

twenty-three

twenty-four

twenty-five

twenty-six

twenty-seven

twenty-eight

The size of my picture is 200 x 200.

One: reverse color effect

Algorithm: just reverse the r, g, b color of each pixel, that is, (255-the original value)

one

two

three

four

five

6 # canvas {

7 border: 1px dashed # aaa

8}

nine

ten

11 _ window.onload = function () {

12 var oCanvas = document.querySelector ("# canvas")

13 oGc = oCanvas.getContext ('2d')

fourteen

15 var oImg = new Image ()

16 oImg.src =''

17 oImg.onload = function () {

18 oGc.drawImage (oImg, 10,10)

19 var imgData = oGc.getImageData (10,10,200,200)

20 data = imgData.data

21 for (var I = 0; I < data.length; I + = 4) {

22 data [I] = 255-data [I]

23 data [iTun1] = 255-data [iTun1]

24 data [iTun2] = 255-data [iTun2]

25}

26 / / after processing, output again

27 oGc.putImageData (imgData, 220,10)

28}

29}

thirty

thirty-one

thirty-two

thirty-three

thirty-four

thirty-five

Second, black and white effect (grayscale image)

The principle of converting a color picture into a black-and-white picture is to find the average value of r (data [I]), g (data [I + 1]), b (data [I + 2]), and then assign the average value to r, g, b

one

two

three

four

five

6 # canvas {

7 border: 1px dashed # aaa

8}

nine

ten

11 _ window.onload = function () {

12 var oCanvas = document.querySelector ("# canvas")

13 oGc = oCanvas.getContext ('2d')

fourteen

15 var oImg = new Image ()

16 oImg.src =''

17 oImg.onload = function () {

18 oGc.drawImage (oImg, 10,10)

19 var imgData = oGc.getImageData (10,10,200,200)

20 data = imgData.data, avg = 0

21 for (var I = 0; I < data.length; I + = 4) {

22 avg = (data [I] + data [iTunes 1] + data [iTunes 2]) / 3

23 data [I] = avg

24 data [iTun1] = avg

25 data [iTun2] = avg

26}

27 / / after processing, output again

28 oGc.putImageData (imgData, 220,10)

29}

30}

thirty-one

thirty-two

thirty-three

thirty-four

thirty-five

thirty-six

You can also assign the grayscale scale of rgb

one

two

three

four

five

6 # canvas {

7 border: 1px dashed # aaa

8}

nine

ten

11 _ window.onload = function () {

12 var oCanvas = document.querySelector ("# canvas")

13 oGc = oCanvas.getContext ('2d')

fourteen

15 var oImg = new Image ()

16 oImg.src =''

17 oImg.onload = function () {

18 oGc.drawImage (oImg, 10,10)

19 var imgData = oGc.getImageData (10,10,200,200)

20 data = imgData.data, avg = 0

21 for (var I = 0; I < data.length; I + = 4) {

22 avg = data [I] * 0.3 + data [iTunes 1] * 0.3 + data [iTunes 2] * 0.4

23 data [I] = avg

24 data [iTun1] = avg

25 data [iTun2] = avg

26}

27 / / after processing, output again

28 oGc.putImageData (imgData, 220,10)

29}

30}

thirty-one

thirty-two

thirty-three

thirty-four

thirty-five

thirty-six

Third, adjust the intensity of brightness

Add a positive value to the r, g, b, channel to brighten, and a negative value to darken.

1 var oImg = new Image ()

2 oImg.src =''

3 oImg.onload = function () {

4 oGc.drawImage (oImg, 10,10)

5 var imgData = oGc.getImageData (10,10,200,200)

6 data = imgData.data, avg = 0

7 for (var I = 0; I < data.length; I + = 4) {

8 data [I] + = 30

9 data [iTun1] + = 50

10 data [iTun2] + = 50

11}

12 / / after processing, output again

13 oGc.putImageData (imgData, 220,10)

14}

Darken:

Data [I]-= 30

Data [iTun1]-= 50

Data [iTun2]-= 50

IV. Retro effect

R, g, b are mixed and added proportionally.

1 var oImg = new Image ()

2 oImg.src =''

3 oImg.onload = function () {

4 oGc.drawImage (oImg, 10,10)

5 var imgData = oGc.getImageData (10,10,200,200)

6 data = imgData.data, avg = 0

7 for (var I = 0; I < data.length; I + = 4) {

8 r = data [I]

9 g = data [iTun1]

10b = data [iTun2]

11 data [I] = r * 0.3 + g * 0.4 + b * 0.3

12 data [iTun1] = r * 0.2 + g * 0.6 + b * 0.2

13 data [iTun2] = r * 0.4 + g * 0.3 + b * 0.3

14}

15 / / after processing, output again

16 oGc.putImageData (imgData, 220,10)

17}

5. Blue mask

The blue mask is to make the picture blue, assign the blue channel to the average of the r, g, b primary colors, set the green and red channels to 0, and other mask effects, just set the average value of the corresponding channels and close other channels.

1 var oImg = new Image ()

2 oImg.src =''

3 oImg.onload = function () {

4 oGc.drawImage (oImg, 10,10)

5 var imgData = oGc.getImageData (10,10,200,200)

6 data = imgData.data, avg = 0

7 for (var I = 0; I < data.length; I + = 4) {

8 avg = (data [I] + data [iTun1] + data [iTun2] / 3)

9 data [I] = 0

10 data [iTun1] = 0

11 data [iTun2] = avg

12}

13 / / after processing, output again

14 oGc.putImageData (imgData, 220,10)

15}

VI. Transparency

This is very simple, just multiply the transparency by a value between 0 and 1. Same as css's opacity.

1 var oImg = new Image ()

2 oImg.src =''

3 oImg.onload = function () {

4 oGc.drawImage (oImg, 10,10)

5 var imgData = oGc.getImageData (10,10,200,200)

6 data = imgData.data, avg = 0

7 for (var I = 0; I < data.length; I + = 4) {

8 data [iTun3] * = 0.2

9}

10 / / after processing, output again

11 oGc.putImageData (imgData, 220,10)

12}

7. CreateImageData: create a pixel area based on a picture or a certain width and height

Cxt.createImageData (w h)

Cxt.createImageData (imgData)

W, h: create the width and height of the area

ImgData: the created area is the same as the width and height of this pixel area. ImgData obtains the return value of image pixels through getImageData.

1, create a transparent red pixel area based on the width and height of a picture

one

two

three

four

five

6 # canvas {

7 border: 1px dashed # aaa

8}

nine

ten

11 _ window.onload = function () {

12 var oCanvas = document.querySelector ("# canvas")

13 oGc = oCanvas.getContext ('2d')

fourteen

15 var oImg = new Image ()

16 oImg.src =''

17 oImg.onload = function () {

18 oGc.drawImage (oImg, 10,10)

19 var imgData = oGc.getImageData (10,10,200,200)

20 data = imgData.data

21 imgData2 = oGc.createImageData (imgData)

22 data2 = imgData2.data

23 for (var I = 0; I < imgData2.width * imgData2.height * 4; I + = 4) {

24 data2 [I] = 255

25 data2 [iTun1] = 0

26 data2 [iTun2] = 0

27 data2 [iTun3] = 30

28}

29 / / after processing, output again

30 oGc.putImageData (imgData2, 220,10)

31}

32}

thirty-three

thirty-four

thirty-five

thirty-six

thirty-seven

thirty-eight

2, customize a blue transparent pixel area of 200 x 200

one

two

three

four

five

6 # canvas {

7 border: 1px dashed # aaa

8}

nine

ten

11 _ window.onload = function () {

12 var oCanvas = document.querySelector ("# canvas")

13 oGc = oCanvas.getContext ('2d')

fourteen

15 var imgData = oGc.createImageData (200,200)

16 data = imgData.data

17 for (var I = 0; I < imgData.width * imgData.height * 4; I + = 4) {

18 data [I] = 0

19 data [iTun1] = 0

20 data [iTun2] = 255

21 data [iTun3] = 100

22}

23 oGc.putImageData (imgData, 10,10)

24}

twenty-five

twenty-six

twenty-seven

twenty-eight

twenty-nine

thirty

Thank you for reading this article carefully. I hope the article "canvas how to achieve anti-color, black-and-white and other beauty effects through pixel processing" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you 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.