canvas 基礎(chǔ)之圖像處理的使用

2024-09-05 07:23:23

字體：大中小

供稿：網(wǎng)友

前些日子，前輩推薦了一個有趣的項(xiàng)目 —— Real-Time-Person-Removal ，這個項(xiàng)目使用了 TensorFlow.js ，以及 canvas 中的圖像處理實(shí)現(xiàn)視頻中的人物消失。借此機(jī)會，復(fù)習(xí)下 canvas 基礎(chǔ)中的圖像處理。

基礎(chǔ) API

canvas 的圖像處理能力通過 ImageData 對象來處理像素數(shù)據(jù)。主要的 API 如下：

createImageData()：創(chuàng)建一個空白的 ImageData 對象
getImageData()：獲取畫布像素數(shù)據(jù)，每一個像素點(diǎn)有 4 個值 —— rgba
putImageData()：將像素數(shù)據(jù)寫入畫布

imageData = {  width: Number,  height: Number,  data: Uint8ClampedArray}

width 是 canvas 畫布的寬或者說 x 軸的像素數(shù)量；height 是畫布的高或者說 y 軸的像素數(shù)量；data 是畫布的像素數(shù)據(jù)數(shù)組，總長度 w * h * 4，每 4 個值（rgba）代表一個像素。

對圖片的處理

下面，我們通過幾個例子來看下 canvas 基礎(chǔ)的圖片處理能力。

原圖效果：

const cvs = document.getElementById("canvas");const ctx = cvs.getContext("2d");const img = new Image();img.src="圖片 URL";img.onload = function () {  ctx.drawImage(img, 0, 0, w, h);}

底片/負(fù)片效果

算法：將 255 與像素點(diǎn)的 rgb 的差，作為當(dāng)前值。

function negative(x) {  let y = 255 - x;  return y;}

效果圖：

const imageData =  ctx.getImageData(0, 0, w, h);const { data } = imageData;let l = data.length;for(let i = 0; i < l; i+=4) {  const r = data[i];  const g = data[i + 1];  const b = data[i + 2];  data[i] = negative(r);  data[i + 1] = negative(g);  data[i + 2] = negative(b);}ctx.putImageData(imageData, 0, 0);

單色效果

單色效果就是保留當(dāng)前像素的 rgb 3個值中的一個，去除其他色值。

for(let i = 0; i < l; i+=4) { // 去除了 r 、g 的值  data[i] = 0;  data[i + 1] = 0;}

效果圖：

灰度圖

灰度圖：每個像素只有一個色值的圖像。0 到 255 的色值，顏色由黑變白。

for(let i = 0; i < l; i+=4) {  const r = data[i];  const g = data[i + 1];  const b = data[i + 2];  const gray = grayFn(r, g, b);  data[i] = gray;  data[i + 1] = gray;  data[i + 2] = gray;}

算法1——平均法：

const gray = (r + g + b) / 3;

效果圖：

算法2——人眼感知：根據(jù)人眼對紅綠藍(lán)三色的感知程度：綠 > 紅 > 藍(lán)，給定權(quán)重劃分

const gray = r * 0.3 + g * 0.59 + b * 0.11

效果圖：

除此以外，還有：

取最大值或最小值。

const grayMax = Math.max(r, g, b); // 值偏大，較亮const grayMin = Math.min(r, g, b); // 值偏小，較暗

取單一通道，即 rgb 3個值中的一個。

二值圖

算法：確定一個色值，比較當(dāng)前的 rgb 值，大于這個值顯示黑色，否則顯示白色。

for(let i = 0; i < l; i+=4) {  const r = data[i];  const g = data[i + 1];  const b = data[i + 2];  const gray = gray1(r, g, b);  const binary = gray > 126 ? 255 : 0;  data[i] = binary;  data[i + 1] = binary;  data[i + 2] = binary;}

效果圖：

高斯模糊

高斯模糊是“模糊”算法中的一種，每個像素的值都是周圍相鄰像素值的加權(quán)平均。原始像素的值有最大的高斯分布值（有最大的權(quán)重），相鄰像素隨著距離原始像素越來越遠(yuǎn)，權(quán)重也越來越小。

一階公式：

（使用一階公式是因?yàn)橐浑A公式的算法比較簡單）

const radius = 5; // 模糊半徑const weightMatrix = generateWeightMatrix(radius); // 權(quán)重矩陣for(let y = 0; y < h; y++) {  for(let x = 0; x < w; x++) {    let [r, g, b] = [0, 0, 0];    let sum = 0;    let k = (y * w + x) * 4;    for(let i = -radius; i <= radius; i++) {      let x1 = x + i;      if(x1 >= 0 && x1 < w) {      let j = (y * w + x1) * 4;      r += data[j] * weightMatrix[i + radius];      g += data[j + 1] * weightMatrix[i + radius];      b += data[j + 2] * weightMatrix[i + radius];      sum += weightMatrix[i + radius];      }    }    data[k] = r / sum;    data[k + 1] = g / sum;    data[k + 2] = b / sum;  }}for(let x = 0; x < w; x++) {  for(let y = 0; y < h; y++) {    let [r, g, b] = [0, 0, 0];    let sum = 0;    let k = (y * w + x) * 4;    for(let i = -radius; i <= radius; i++) {      let y1 = y + i;      if(y1 >= 0 && y1 < h) {        let j = (y1 * w + x) * 4;        r += data[j] * weightMatrix[i + radius];        g += data[j + 1] * weightMatrix[i + radius];        b += data[j + 2] * weightMatrix[i + radius];        sum += weightMatrix[i + radius];      }    }    data[k] = r / sum;    data[k + 1] = g / sum;    data[k + 2] = b / sum;  }}function generateWeightMatrix(radius = 1, sigma) { // sigma 正態(tài)分布的標(biāo)準(zhǔn)偏差  const a = 1 / (Math.sqrt(2 * Math.PI) * sigma);  const b = - 1 / (2 * Math.pow(sigma, 2));  let weight, weightSum = 0, weightMatrix = [];  for (let i = -radius; i <= radius; i++){    weight = a * Math.exp(b * Math.pow(i, 2));    weightMatrix.push(weight);    weightSum += weight;  }  return weightMatrix.map(item => item / weightSum); // 歸一處理}

效果圖：