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

This article is about how JS encapsulates various filter components of cavans. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Effect display:

one。 Realization idea

We know that each picture is composed of several pixels, the resulting pixel is an array, and the color is composed of RGBA, so every four points in the array form a color value, in order to achieve the special effect of each filter, it is necessary to change the pixel value regularly. When we get the picture and draw it into cavans through the ctx.drawImage () method, we can get the picture data through the ctx.getImageData () method. You can then call the method through filter.js to achieve the filter effect.

2. Cavans pre-preparation 1. Get cavanslet filterCavans = document.getElementById ("filterCavans"); filterCavans.width = img.clientWidth;filterCavans.height = img.clientHeight;2. Get 2d context object ctx = filterCavans.getContext ("2d"); 3. Draw pictures on cavans let img = document.getElementById ("img"); ctx.drawImage (img, 0,0, img.clientWidth, img.clientHeight); 4. Get the image data canvasData = ctx.getImageData (0,0, filterCavans.width, filterCavans.height) drawn on cavans. Principle and realization 1. Black and white tone

Principle: determine whether the RGB value of the current pixel is more than half of 255. If it is larger, all are set to 255, and if less than, all are set to 0.

BlackWhite (imageData) {/ / the pixel set of the picture in the region let data = imageData.data; for (let I = 0; I

< data.length; i += 4) { let r = data[i]; let g = data[i + 1]; let b = data[i + 2]; if (r >

{data [I] = 255 data [I + 1] = 255 data [I + 2] = 255} else if (r

< 255 / 2) { data[i] = 0 data[i + 1] = 0 data[i + 2] = 0 } }}2.灰色调 原理：把当前像素的RGB值 设置为当前像素RGB的平均值 gray(imageData) { let data = imageData.data; for (let i = 0; i < data.length; i += 4) { let r = data[i]; let g = data[i + 1]; let b = data[i + 2]; let average = Math.floor((r + g + b) / 3); data[i] = average; data[i + 1] = average; data[i + 2] = average; }}3.反转 原理：用255减去当前像素的RGB值 toggle(imageData) { let data = imageData.data; for (let i = 0, len = data.length; i < len; i += 4) { data[i] = 255 - data[i]; data[i + 1] = 255 - data[i + 1] data[i + 2] = 255 - data[i + 2]; }}4.复古 原理：RGB值乘以固定的数值 sepia(imageData) { let data = imageData.data; for (let i = 0; i < data.length; i += 4) { let r = data[i]; let g = data[i + 1]; let b = data[i + 2]; data[i] = (r * 0.393) + (g * 0.769) + (b * 0.189); }}5.红色蒙版 原理：红色通道取平均值,绿色通道和蓝色通道都设为0 myRed(imageData) { let data = imageData.data; for (let i = 0; i < data.length; i += 4) { let r = data[i]; let g = data[i + 1]; let b = data[i + 2]; data[i] = (r + g + b) / 3; data[i + 1] = 0; data[i + 2] = 0; }}6.增加亮度 原理：RGB值直接加上所需要设置亮度delta brightness(imageData, delta) { let data = imageData.data; for (let i = 0; i < data.length; i += 4) { data[i] += delta; data[i + 1] += delta; data[i + 2] += delta; }}7.浮雕 原理：每个像素的RGB值都设置为该位置的初始值 num 减去其上一个像素值得差，最后统一加上128用于控制灰度 carve(imageData) { let w = imageData.width, h = imageData.height; let data = imageData.data; for (let i = h; i >

0; iMel -) {/ / Row for (let j = w; j > 0; JMAE -) {/ / column for (let k = 0; k

< 3; k++) { let num = (i * w + j) * 4 + k; let numUp = ((i - 1) * w + j) * 4 + k; let numDown = ((i + 1) * w + j) * 4 + k; data[num] = data[num] - data[numUp - 4] + 128; } } }}8.雾化 原理：通过随机方法来设置当前像素点周围的255白色值 fog(imageData) { let w = imageData.width, h = imageData.height; let data = imageData.data; for (let i = h; i >

0; iWhat -) {/ / Line for (let j = w; j > 0; JMY -) {/ / column let num = (I * w + j) * 4; if (Math.random () < 0.1) {data [num] = 255; data [num + 1] = 255; data [num + 2] = 255 } 9. Frosted glass

Principle: replace the color of the current point with the color of any point in a certain range around the current point, and the most commonly used is to replace the adjacent points randomly.

Spread (canvasData) {let w = canvasData.width, h = canvasData.height; for (let I = 0; I < h; iTunes +) {for (let j = 0; j < w; jacks +) {for (let k = 0; k < 3; KTH +) {/ / Index of the pixel in the array let num = (I * w + j) * 4 + k Let rand = Math.floor (Math.random () * 10)% 3; let num2 = ((I + rand) * w + (j + rand)) * 4 + k; canvasData.data [num] = canvasData.data [num2]}} 10. Mosaic

Principle: the image is divided into image blocks of the same size, each image block is a square, and all pixel values are equal in this square. We can think of this square as a template window, and all the corresponding image pixel values in the template are equal to the pixel values of the first pixel in the upper left corner of the template, so the effect is the mosaic effect. the size of the square template determines the size of the mosaic block, that is, the degree of mosaic of the image.

Mosaic (imageData, size) {let w = imageData.width, h = imageData.height; let data = imageData.data; for (let I = 1; I < h-1; I + = size) {for (let j = 1; j < w-1; j + = size) {let num = (I * w + j) * 4; for (let dx = 0; dx < size; dx++) {for (let dy = 0) Dy < size; dy++) {let x = I + dx; let y = j + dy; let p1 = (x * w + y) * 4; data [p1 + 0] = data [num + 0]; data [p1 + 1] = data [num + 1] Data [p1 + 2] = data [num + 2];}} 11. Fuzzy

Principle: take the average of the RGB values of the surrounding pixels of the current pixel as the new RGB value

MyBlur (imageData) {let w = imageData.width, h = imageData.height; let data1 = imageData.data; let data2 = imageData.data; for (let I = 0; I < h; iSum +) {/ / row for (let j = 0; j < w; jacks +) {/ / column for (let k = 0; k < 3; kink +) {let num = (I * w + j) * 4 + k Let numUp = ((I-1) * w + j) * 4 + k; let numDown = ((I + 1) * w + j) * 4 + k / / Why is the change of a pair of data1 with other open memory reflected in data data1 [num] = (data2 [numUp-4] + data2 [numUp] + data2 [numUp + 4] + data2 [num-4] + data2 [num] + data2 [num + 4] + data2 [numDown-4] + data2 [numDown] + data2 [numDown + 4]) / 9 Four. Use / / black and white filter.blackWhite (canvasData); / / Save the picture save () {this.download ("png");}, / / download download (type) {/ / set the type of saved picture let imgdata = filterCavans.toDataURL (type) using the a tag / change mime-type to image/octet-stream and force browsers to download let fixtype = function (type) {type = type.toLocaleLowerCase (). Replace (/ jpg/i, "jpeg"); let r = type.match (/ png | jpeg | bmp | gif/) [0]; return "image/" + r;}; imgdata = imgdata.replace (fixtype (type), "image/octet-stream") / / Save the picture locally let saveFile = function (data, filename) {let link = document.createElement ("a"); link.href = data; link.download = filename; link.click ();}; let filename = new Date (). ToLocaleDateString () + "." + type; saveFile (imgdata, filename);} Thank you for reading! This is the end of this article on "how JS encapsulates multiple filter components of cavans". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.