qt获取图像的每个像素rgb_canvas 基础之图像处理

前些日子，前辈推荐了一个有趣的项目 —— 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 基础的图片处理能力。 原图效果：

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;}复制代码

效果图：