canvas 基础之图像处理的使用

程序员文章站 2022-04-18 11:22:00

这篇文章主要介绍了canvas 基础之图像处理的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧... 20-04-10...

前些日子，前辈推荐了一个有趣的项目 —— real-time-person-removal ，这个项目使用了 tensorflow.js ，以及 canvas 中的图像处理实现视频中的人物消失。借此机会，复习下 canvas 基础中的图像处理。

基础 api

canvas 的图像处理能力通过 imagedata 对象来处理像素数据。主要的 api 如下：

createimagedata()：创建一个空白的 imagedata 对象
getimagedata()：获取画布像素数据，每一个像素点有 4 个值 —— rgba
putimagedata()：将像素数据写入画布

imagedata = {
  width: number,
  height: number,
  data: uint8clampedarray
}

width 是 canvas 画布的宽或者说 x 轴的像素数量；height 是画布的高或者说 y 轴的像素数量；data 是画布的像素数据数组，总长度 w * h * 4，每 4 个值（rgba）代表一个像素。

对图片的处理

下面，我们通过几个例子来看下 canvas 基础的图片处理能力。

原图效果：

canvas 基础之图像处理的使用

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);
}

底片/负片效果

算法：将 255 与像素点的 rgb 的差，作为当前值。

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

效果图：

canvas 基础之图像处理的使用

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);

单色效果

单色效果就是保留当前像素的 rgb 3个值中的一个，去除其他色值。

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

效果图：

canvas 基础之图像处理的使用

灰度图

灰度图：每个像素只有一个色值的图像。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;

效果图：

canvas 基础之图像处理的使用

算法2——人眼感知：根据人眼对红绿蓝三色的感知程度：绿 > 红 > 蓝，给定权重划分

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

效果图：

canvas 基础之图像处理的使用

除此以外，还有：

取最大值或最小值。

const graymax = math.max(r, g, b); // 值偏大，较亮
const graymin = math.min(r, g, b); // 值偏小，较暗

取单一通道，即 rgb 3个值中的一个。

二值图

算法：确定一个色值，比较当前的 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;
}

效果图：

canvas 基础之图像处理的使用

高斯模糊

高斯模糊是“模糊”算法中的一种，每个像素的值都是周围相邻像素值的加权平均。原始像素的值有最大的高斯分布值（有最大的权重），相邻像素随着距离原始像素越来越远，权重也越来越小。

一阶公式：

canvas 基础之图像处理的使用

（使用一阶公式是因为一阶公式的算法比较简单）

const radius = 5; // 模糊半径
const weightmatrix = generateweightmatrix(radius); // 权重矩阵
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 正态分布的标准偏差
  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); // 归一处理
}

效果图：

canvas 基础之图像处理的使用