JS封裝cavans多種濾鏡組件
更新時間：2022年02月15日 16:48:13 作者：楊威
這篇文章主要介紹了JS封裝cavans多種濾鏡組件,本文主要是講解圖片濾鏡的效果以及實現(xiàn)思路，如需更多的濾鏡效果可以研究算法或者參考其他的一些開源庫glfx.js、lena.js等等,需要的朋友可以參考下
??前言:
圖片處理現(xiàn)在已經(jīng)成為了我們生活中的剛需，想必大家也經(jīng)常有這方面的需求。實際前端業(yè)務中，也經(jīng)常會有很多的項目需要用到圖片加工和處理。本文以javascript為基礎，用html5 + cavans實現(xiàn)多種常見的濾鏡效果,并且封裝成可調(diào)用的js文件(filter.js)，且支持本地保存圖片。
效果展示:
一.實現(xiàn)思路
我們知道每張圖片都是由若干像素組成，得到的像素是一個數(shù)組，顏色又是由RGBA組成，所以數(shù)組中每4個點組成一個顏色值，要去實現(xiàn)每個濾鏡的特效,就要去有規(guī)律的去改變像素值。當我們拿到圖片并且通過ctx.drawImage()方法繪制到cavans中后，可以通過ctx.getImageData()方法來獲取圖片數(shù)據(jù)。然后就可以通過filter.js來調(diào)用方法實現(xiàn)濾鏡效果。
二.cavans前置準備
1.獲取cavans
let filterCavans = document.getElementById("filterCavans");
filterCavans.width = img.clientWidth;
filterCavans.height = img.clientHeight;2.獲取2d context對象
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);
三.原理及實現(xiàn)
1.黑白調(diào)
原理：判斷當前像素的RGB值是否大于255的一半,如大于就全部設置為255,小于就全部設為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)
原理：把當前像素的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.反轉(zhuǎn)
原理：用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值乘以固定的數(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.紅色蒙版
原理：紅色通道取平均值,綠色通道和藍色通道都設為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 減去其上一個像素值得差，最后統(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.霧化
原理：通過隨機方法來設置當前像素點周圍的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.毛玻璃
原理：用當前點四周一定范圍內(nèi)任意一點的顏色來替代當前點顏色，最常用的是隨機的采用相鄰點進行替代。
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.馬賽克
原理：將圖像分成大小一致的圖像塊，每一個圖像塊都是一個正方形，并且在這個正方形中所有像素值都相等。我們可以將這個正方形看作是一個模板窗口，模板中對應的所有圖像像素值都等于該模板的左上角第一個像素的像素值，這樣的效果就是馬賽克效果，而正方形模板的大小則決定了馬賽克塊的大小，即圖像馬賽克化的程度。
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.模糊
原理：將當前像素的周邊像素的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;
? ? ? ? ? ? ? ? // 對另開內(nèi)存的data1的改變?yōu)槭裁磿磻絛ata中
? ? ? ? ? ? ? ? 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標簽下載
download(type) {
? ? //設置保存圖片的類型
? ? let imgdata = filterCavans.toDataURL(type);
? ? //將mime-type改為image/octet-stream,強制讓瀏覽器下載
? ? 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);
}到此這篇關于JS封裝cavans多種濾鏡組件的文章就介紹到這了,更多相關JS封裝cavans內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文給大家介紹bootstrap按鈕相關知識，包括按鈕大小、按鈕狀態(tài)、按鈕標簽相關樣式定義，對bootstrap按鈕相關知識感興趣的朋友一起學習吧2016-01-01
本文為大家介紹的是使用JS寫的貪吃蛇游戲，個人練習之用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望對大家學習js有所幫助2015-12-12
這篇文章主要為大家詳細介紹了js實現(xiàn)無縫輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要為大家詳細介紹了AjaxUpLoad.js實現(xiàn)文件上傳的具體代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
這篇文章主要為大家詳細解析了bootstrap下拉菜單使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了JavaScript設計模式之命令模式,結(jié)合實例形式分析了javascript命令模式的概念、原理、用法及相關注意事項,需要的朋友可以參考下2019-01-01
JS 組件系列之 bootstrap treegrid 組件封裝過程
最近產(chǎn)品需要設計一套相對完整的組織架構(gòu)的解決方案，由于組織架構(gòu)涉及到層級關系，在表格里面展示層級關系，自然就要用到所謂的treegrid。下面小編通過本文給大家分享JS 組件系列之 bootstrap treegrid 組件的封裝過程,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了JS獲取網(wǎng)頁圖片name屬性的方法,涉及javascript操作圖片屬性的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
這篇文章主要給大家簡單介紹了JavaScript中運算符的優(yōu)先級的相關問題，十分的實用，有需要的小伙伴可以參考下。2015-07-07
最近我碰到了這樣一個需求: 將一個元素插入到現(xiàn)有數(shù)組的特定索引處，下面是具體的實現(xiàn)，需要的朋友不要錯過2014-07-07