html5利用canvas實現顏色容差摳圖功能

2024-09-05 07:23:11

字體：大中小

來源：轉載

供稿：網友

利用canvas的getImageData，我們可以獲取到一張圖片每一個像素的信息，而通過對每一個像素信息的對比，我們就可以找到需要消去的像素點。比如下面這一張圖片，如果我們想要扣去白色部分(粉色是body的背景顏色)。

let canvas = document.querySelector('#canvas');let context = canvas.getContext('2d');let img = document.createElement('img');img.src = './head2.png';img.onload = function () {    canvas.height = img.height;    canvas.width = img.width;    context.drawImage(img, 0, 0);    cutout(canvas, [255, 255, 255], 0.2); // 對白色進行摳除，容差為0.2}function cutout(canvas, color, range = 0) {    let context = canvas.getContext('2d');    let imageInfo = context.getImageData(0, 0, canvas.width, canvas.height);    // pixiArr是一個數組，每四個數組元素代表一個像素點，這四個數組元素分別對應一個像素的r，g，b，a值。    let pixiArr = imageInfo.data;    for (let i = 0; i < pixiArr.length; i += 4) {    // 匹配到目標像素就將目標像素的alpha設為0        if (testColor([pixiArr[i], pixiArr[i + 1], pixiArr[i + 2]], color, range)) pixiArr[i + 3] = 0;    }    context.putImageData(imageInfo, 0, 0);}function testColor(current, target, range) {    for (let i = 0; i < 3; i++) {        if (!((1 - range) * target[i] <= current[i] && (1 + range) * target[i] >= current[i])) return false;    }    return true;}

testColor(current, target, range) 方法三個參數分別為待檢測像素點的rgb數組、目標像素點的rgb數組和容差范圍，這里的容差只是簡單用r、g、b的值分別乘以(1 + range)和(1 - range)來計算并對比，不同的容差參數會得到不同的效果↓

range = 0.095

range = 0.1

range = 0.2

當然對于底色是標準的純色的圖片就不需要容差了。

邊界處理

但是有時候我們希望有一個邊界，讓摳圖操作不對邊界內部的像素造成影響。比如上面的圖片，我們希望不會對人物頭像內部的像素造成影響。如果我們一行一行來看，是不是只要在碰到不是邊界像素的時候停止操作，就可以達到效果了呢？

我們對每一行分別進行掃描，定義一個左指針 left 指向這一行的第一個像素，定義一個右指針 right 指向這一行的最后一個像素，并用一個 leftF 標識左邊是否碰到邊界，一個 rightF 標識右邊是否碰到邊界，當沒碰到邊界時指針就一直向內收縮，直到兩個指針都碰到邊界或者左右指針重合就跳到下一行,直到所有行都掃描完畢。

function cutout(canvas, color, range = 0) {    let context = canvas.getContext('2d');    let imageInfo = context.getImageData(0, 0, canvas.width, canvas.height);    let pixiArr = imageInfo.data;    for (let row = 0; row < canvas.height; row++) {        let left = row * 4 * canvas.width; // 指向行首像素        let right = left + 4 * canvas.width - 1 - 3; // 指向行尾像素        let leftF = false; // 左指針是否碰到邊界的標識        let rightF = false; // 右指針是否碰到邊界的標識        while (!leftF || !rightF) { // 當左右指針都為true，即都碰到邊界時結束            if (!leftF) {                if (testColor([pixiArr[left], pixiArr[left + 1], pixiArr[left + 2]], color, range)) {                    pixiArr[left + 3] = 0; // 此像素的alpha設為0                    left += 4; // 移到下一個像素                } else leftF = true; // 碰到邊界            }            if (!rightF) {                if (testColor([pixiArr[right], pixiArr[right + 1], pixiArr[right + 2]], color, range)) {                    pixiArr[right + 3] = 0;                    right -= 4;                } else rightF = true;            }            if (left == right) { // 左右指針重合                leftF = true;                rightF = true;            };        }    }    context.putImageData(imageInfo, 0, 0);}

雖然大概完成了我們的需求，但是看一下上面頭發那為啥會多了一塊白色

因為我們僅僅只進行了行掃描，當左指針碰到頭發時就會停止掃描，但是頭發弧度里面的就無法被掃描到了，我們還需要進行列掃描，改造一下上面的方法：

function cutout(canvas, color, range = 0) {    let context = canvas.getContext('2d');    let imageInfo = context.getImageData(0, 0, canvas.width, canvas.height);    let pixiArr = imageInfo.data;    for (let row = 0; row < canvas.height; row++) {        let left = row * 4 * canvas.width;        let right = left + 4 * canvas.width - 1 - 3;        let leftF = false;        let rightF = false;        while (!leftF || !rightF) {            if (!leftF) {                if (testColor([pixiArr[left], pixiArr[left + 1], pixiArr[left + 2]], color, range)) {                    pixiArr[left + 3] = 0;                    left += 4;                } else leftF = true;            }            if (!rightF) {                if (testColor([pixiArr[right], pixiArr[right + 1], pixiArr[right + 2]], color, range)) {                    pixiArr[right + 3] = 0;                    right -= 4;                } else rightF = true;            }            if (left == right) {                leftF = true;                rightF = true;            };        }    }    // 同理進行列掃描    for (let col = 0; col < canvas.width; col++) {        let top = col * 4; // 指向列頭        let bottom = top + (canvas.height - 2) * canvas.width * 4 + canvas.width * 4; // 指向列尾        let topF = false;        let bottomF = false;        while (!topF || !bottomF) {            if (!topF) {                if (testColor([pixiArr[top], pixiArr[top + 1], pixiArr[top + 2]], color, range)) {                    pixiArr[top + 3] = 0;                    top += canvas.width * 4;                } else topF = true;            }            if (!bottomF) {                if (testColor([pixiArr[bottom], pixiArr[bottom + 1], pixiArr[bottom + 2]], color, range)) {                    pixiArr[bottom + 3] = 0;                    bottom -= canvas.width * 4;                } else bottomF = true;            }            if (top == bottom) {                topF = true;                bottomF = true;            };        }    }    context.putImageData(imageInfo, 0, 0);}

至于top和bottom為啥是那樣計算畫個矩陣圖大概就知道了。

處理后↓

其實還可以先將 pixiArr 包裝為以一個像素點為單位的矩陣

[    [{r: 255, g: 255, b: 255, a: 1}, {r: 255, g: 255, b: 255, a: 1}, {r: 255, g: 255, b: 255, a: 1}],    [{r: 255, g: 255, b: 255, a: 1}, {r: 255, g: 255, b: 255, a: 1}, {r: 255, g: 255, b: 255, a: 1}]    [{r: 255, g: 255, b: 255, a: 1}, {r: 255, g: 255, b: 255, a: 1}, {r: 255, g: 255, b: 255, a: 1}]]

處理后計算像素下標也就會更簡單，列掃描時直接先將這個矩陣旋轉，再用行掃描處理一遍就行了。這樣處理pixiArr也有利于進一步對算法進行優化。

上述方法雖然大概完成了摳圖效果，但是這種簡單處理還會有許多情況沒有考慮到。

比如右邊頭發這里是行掃描和列掃描都無法觸碰到的區域↓