JS封裝cavans多種濾鏡組件

更新時(shí)間：2022年02月15日 16:48:13 作者：楊威

這篇文章主要介紹了JS封裝cavans多種濾鏡組件,本文主要是講解圖片濾鏡的效果以及實(shí)現(xiàn)思路，如需更多的濾鏡效果可以研究算法或者參考其他的一些開源庫glfx.js、lena.js等等,需要的朋友可以參考下

圖片處理現(xiàn)在已經(jīng)成為了我們生活中的剛需，想必大家也經(jīng)常有這方面的需求。實(shí)際前端業(yè)務(wù)中，也經(jīng)常會(huì)有很多的項(xiàng)目需要用到圖片加工和處理。本文以javascript為基礎(chǔ)，用html5 + cavans實(shí)現(xiàn)多種常見的濾鏡效果,并且封裝成可調(diào)用的js文件(filter.js)，且支持本地保存圖片。

效果展示:

一.實(shí)現(xiàn)思路

我們知道每張圖片都是由若干像素組成，得到的像素是一個(gè)數(shù)組，顏色又是由RGBA組成，所以數(shù)組中每4個(gè)點(diǎn)組成一個(gè)顏色值，要去實(shí)現(xiàn)每個(gè)濾鏡的特效,就要去有規(guī)律的去改變像素值。當(dāng)我們拿到圖片并且通過ctx.drawImage()方法繪制到cavans中后，可以通過ctx.getImageData()方法來獲取圖片數(shù)據(jù)。然后就可以通過filter.js來調(diào)用方法實(shí)現(xiàn)濾鏡效果。

二.cavans前置準(zhǔn)備

1.獲取cavans

let filterCavans = document.getElementById("filterCavans");
filterCavans.width = img.clientWidth;
filterCavans.height = img.clientHeight;

2.獲取2d context對(duì)象

ctx = filterCavans.getContext("2d");

3.繪制圖片到cavans上

let img = document.getElementById("img");
ctx.drawImage(img, 0, 0, img.clientWidth, img.clientHeight);

4.獲取在cavans上已繪制圖片數(shù)據(jù)

canvasData = ctx.getImageData( 0, 0, filterCavans.width, filterCavans.height);

三.原理及實(shí)現(xiàn)

1.黑白調(diào)

原理：判斷當(dāng)前像素的RGB值是否大于255的一半,如大于就全部設(shè)置為255,小于就全部設(shè)為0

blackWhite(imageData) {
? ? //所在區(qū)域圖片的像素集
? ? 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 > 255 / 2) {
? ? ? ? ? ? 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.灰色調(diào)

原理：把當(dāng)前像素的RGB值設(shè)置為當(dāng)前像素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.反轉(zhuǎn)

原理：用255減去當(dāng)前像素的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.復(fù)古

原理：RGB值乘以固定的數(shù)值

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.紅色蒙版

原理：紅色通道取平均值,綠色通道和藍(lán)色通道都設(shè)為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值直接加上所需要設(shè)置亮度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.浮雕

原理：每個(gè)像素的RGB值都設(shè)置為該位置的初始值 num 減去其上一個(gè)像素值得差，最后統(tǒng)一加上128用于控制灰度

carve(imageData) {
? ? let w = imageData.width, h = imageData.height;
? ? let data = imageData.data;
? ? for (let i = h; i > 0; i--) { ?// 行
? ? ? ? for (let j = w; j > 0; j--) { ?// 列
? ? ? ? ? ? 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.霧化

原理：通過隨機(jī)方法來設(shè)置當(dāng)前像素點(diǎn)周圍的255白色值

fog(imageData) {
? ? let w = imageData.width, h = imageData.height;
? ? let data = imageData.data;
? ? for (let i = h; i > 0; i--) { ?// 行
? ? ? ? for (let j = w; j > 0; j--) { ?// 列
? ? ? ? ? ? let num = (i * w + j) * 4;
? ? ? ? ? ? if (Math.random() < 0.1) {
? ? ? ? ? ? ? ? data[num] = 255;
? ? ? ? ? ? ? ? data[num + 1] = 255;
? ? ? ? ? ? ? ? data[num + 2] = 255;
? ? ? ? ? ? }
? ? ? ? }
? ? }
}

9.毛玻璃

原理：用當(dāng)前點(diǎn)四周一定范圍內(nèi)任意一點(diǎn)的顏色來替代當(dāng)前點(diǎn)顏色，最常用的是隨機(jī)的采用相鄰點(diǎn)進(jìn)行替代。

spread(canvasData) {
? ? let w = canvasData.width, h = canvasData.height;
? ? for (let i = 0; i < h; i++) {
? ? ? ? for (let j = 0; j < w; j++) {
? ? ? ? ? ? for (let k = 0; k < 3; k++) {
? ? ? ? ? ? ? ? // 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.馬賽克

原理：將圖像分成大小一致的圖像塊，每一個(gè)圖像塊都是一個(gè)正方形，并且在這個(gè)正方形中所有像素值都相等。我們可以將這個(gè)正方形看作是一個(gè)模板窗口，模板中對(duì)應(yīng)的所有圖像像素值都等于該模板的左上角第一個(gè)像素的像素值，這樣的效果就是馬賽克效果，而正方形模板的大小則決定了馬賽克塊的大小，即圖像馬賽克化的程度。

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.模糊

原理：將當(dāng)前像素的周邊像素的RGB值各自的平均值作為新的RGB值

myBlur(imageData) {
? ? let w = imageData.width, h = imageData.height;
? ? let data1 = imageData.data;
? ? let data2 = imageData.data;

? ? for (let i = 0; i < h; i++) { ?// 行
? ? ? ? for (let j = 0; j < w; j++) { ?// 列
? ? ? ? ? ? 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;
? ? ? ? ? ? ? ? // 對(duì)另開內(nèi)存的data1的改變?yōu)槭裁磿?huì)反應(yīng)到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;
? ? ? ? ? ? }
? ? ? ? }
? ? }
}

四.使用

//黑白調(diào)
filter.blackWhite(canvasData);

//保存圖片
save() {
? ? this.download("png");
},
//利用a標(biāo)簽下載
download(type) {
? ? //設(shè)置保存圖片的類型
? ? let imgdata = filterCavans.toDataURL(type);
? ? //將mime-type改為image/octet-stream,強(qiáng)制讓瀏覽器下載
? ? 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");
? ? //將圖片保存到本地
? ? 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);
}

到此這篇關(guān)于JS封裝cavans多種濾鏡組件的文章就介紹到這了,更多相關(guān)JS封裝cavans內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: