JS封裝cavans多種濾鏡元件

2022-02-15 19:00:22

圖片處理現在已經成為了我們生活中的剛需，想必大家也經常有這方面的需求。實際前端業務中，也經常會有很多的專案需要用到圖片加工和處理。本文以javascript為基礎，用html5 + cavans實現多種常見的濾鏡效果,並且封裝成可呼叫的js檔案(filter.js)，且支援本地儲存圖片。

效果展示:

一.實現思路

我們知道每張圖片都是由若干畫素組成，得到的畫素是一個陣列，顏色又是由RGBA組成，所以陣列中每4個點組成一個顏色值，要去實現每個濾鏡的特效,就要去有規律的去改變畫素值。當我們拿到圖片並且通過ctx.drawImage()方法繪製到cavans中後，可以通過ctx.getImageData()方法來獲取圖片資料。然後就可以通過filter.js來呼叫方法實現濾鏡效果。

二.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上已繪製圖片資料

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

三.原理及實現

1.黑白調

原理：判斷當前畫素的RGB值是否大於255的一半,如大於就全部設定為255,小於就全部設為0

blackWhite(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];
        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.灰色調

原理：把當前畫素的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; 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.毛玻璃

原理：用當前點四周一定範圍內任意一點的顏色來替代當前點顏色，最常用的是隨機的採用相鄰點進行替代。

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;
                // 對另開記憶體的data1的改變為什麼會反應到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;
            }
        }
    }
}

四.使用

//黑白調
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內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！