canvas 像素操作

在 canvas 中可以使用 context.drawImage(image,dx,dy) 方法将图片绘制在 canvas 上。将图片绘制上去后，还可以使用 context.getImageData(sx, sy, sw, sh) 方法获取 canvas 区域隐含的像素数据，该方法返回一个 ImageData 对象，里面包含的是 canvas 像素信息。

getImageData 函数

这个函数有四个参数，都是必选的。context.getImageData(sx, sy, sw, sh)，其中：

sx：将要被提取的图像数据矩形区域的左上角 x 坐标；
sy：将要被提取的图像数据矩形区域的左上角 y 坐标；
sw：将要被提取的图像数据矩形区域的宽度；
sy：将要被提取的图像数据矩形区域的高度；

const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");let image = new Image(canvas.height);
image.src = "图片路劲.jpg";// image onload后再获得像素，不然有可能获得不了
image.onload = function(){ctx.drawImage(image,0,0);let imageData = ctx.getImageData(0,0,canvas.width,canvas.height);console.log(imageData);/*imageData键值说明:colorSpace: string -- 图片色彩转换标准data: Array -- 我们想要获得的区域内的像素信息height: number -- canvas高度width: number -- canvas宽度ps：imageData.data 中的像素数据是一个一维正整数数组（Uint8ClampedArray 类型的数组，即：无符号整型），一个像素信息包含 RGB 三原色信息和透明度。data 数组数据每四个为一组，分别表示 RGB 通道和透明度。这四种值取值都在 0-255 之间。*/
}

putImageData() 函数

该方法可以将 imageData 对象绘制到 canvas 上。我们可以用 getImageData 将获取到的 imageData 数据处理后再使用 putImageData 方法重新绘制到 canvas 中。
参数：
ctx.putImageData(imagedata, dx, dy);
或：ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

imagedata：getImageData返回的imageData数据
dx：源图像数据在目标画布中的 x 轴方向的偏移量；
dy：源图像数据在目标画布中的 y 轴方向的偏移量；
dirtyX 可选：在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（x 坐标）。
dirtyY 可选:：在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（y 坐标）。
dirtyWidth 可选：在源图像数据中，矩形区域的宽度。默认是图像数据的宽度。
dirtyHeight 可选：在源图像数据中，矩形区域的高度。默认是图像数据的高度。

简单的 canvas 的像素操作

在 CSS 颜色值里，可以使用六位十六进制法表示颜色值，比如：#000000 表示纯黑色，还可以使用 rgb 通道表示法表示一个颜色，格式：rgb(red,green,blue) 当值是 rgb(255,255,255) 是就是纯白色，rgb(255,0,0) 表示红色。rgb 通道的取值在 0-255 之间。在 CSS 当中，还定义了 rgba 颜色值，多出来的 a 表示透明度，只不过取值在 0-1 之间，0 表示透明度为 100%（而在 canvas 的像素中，透明度同样是 0-255 之间）。

通过上面getImageData 和putImageData我们就可以随意操作像素数据了。
这里简单用代码给出几个例子

<img src="https://profile.csdnimg.cn/1/8/0/0_wydsnza"height="300" width="300" /><canvas id="canvas" height="300" width="300"></canvas><script>const canvas = document.querySelector("#canvas");const ctx = canvas.getContext("2d");let image = new Image(canvas.height);image.src = "https://profile.csdnimg.cn/1/8/0/0_wydsnza";image.onload = function () {ctx.drawImage(image, 0, 0);let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);let data = imageData.data;let newData = imageData//到这一步 我们已经获取到区域内的像素数组data了 接下来我们只需要遍历之后对每一个像素进行独立操作就可以了for (let i = 0; i < data.length; i += 4) {//这里注意一下 一个像素信息包含 RGB 三原色信息和透明度 所以这里data数组是每四个数组元素代表一个像素 let r = newData.data[i], g = newData.data[i + 1], b = newData.data[i + 2]//修改透明度(乘的这个值越高 透明度越低 取值范围 0-1 浮点型)//newData.data[i + 3] = 255*0.5// 修改明度(乘的这个值越高 明度越高 取值范围0-1 浮点型)// newData.data[i] = r * 0.5// newData.data[i + 1] = g * 0.5// newData.data[i + 2] = b * 0.5//反色//newData.data[i] = 255 - r//newData.data[i + 1] = 255 - g//newData.data[i + 2] = 255 - b//灰度//newData.data[i] = (r + g + b) / 3//newData.data[i + 1] = (r + g + b) / 3//newData.data[i + 2] = (r + g + b) / 3}ctx.putImageData(newData, 0, 0);}</script>

运行效果:

透明度：

明度:

反色：

灰度：

只开启r通道

只开启g通道

只开启b通道