文章目录
canvas可以对图片的像素进行操作。
-
获取画布的像素信息
画笔.getImageData(x1,y1,x2,y2): (x1,y1)起点； (x2,y2)终点。
获取到的像素信息是一个一维数组，四个值是一个像素点的信息分别代表 rgba的四个值，取值都是0-255 -
渲染画布像素信息
将修改好的数据重新渲染到画布上：画笔.putImageData(ImageData , x1, y1);
ImageData ：像素信息
（x1,y1）: ImageData 对象左上角的 x和y 坐标，以像素计。
putImageData最多可以有7个参数：
ctx.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
imgData 规定要放回画布的 ImageData 对象。
x ImageData 对象左上角的 x 坐标，以像素计。
y ImageData 对象左上角的 y 坐标，以像素计。
dirtyX 可选。水平值（x），以像素计，在画布上显示图像的位置。
dirtyY 可选。竖直值（y），以像素计，在画布上显示图像的位置。
dirtyWidth 可选。在画布上绘制图像所使用的宽度。
dirtyHeight 可选。在画布上绘制图像所使用的高度。
eg：图片变灰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- -->
<canvas
id="canvas1"
width="600"
height="400"
style="background: lightgray"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1");
var ctx = canvas1.getContext("2d");
let img = new Image();
img.src = "./QQ截图20230117100435.png";
img.onload = function () {
ctx.drawImage(img, 0, 0, 600, 400);
// 获取画布的像素信息：画笔.getImageData(x1,y1,x2,y2)
// 像素信息是一个一维数组，四个值是一个像素点的信息分别代表 rgba的四个值
let imageData = ctx.getImageData(0, 0, 600, 400);
for (let i = 0; i < imageData.data.length; i += 4) {
// 变灰
let avg =
(imageData.data[i] +
imageData.data[i + 1] +
imageData.data[i + 2]) /
3;
imageData.data[i] = avg;
imageData.data[i + 1] = avg;
imageData.data[i + 2] = avg;
imageData.data[i + 3] = 255;
}
//将修改好的数据重新渲染到画布上
ctx.putImageData(imageData, 0, 0);
};
</script>
</body>
</html>
原图：
变化后的图：
使用ctx.putImageData(imageData, 0, 0, 300, 200, 300, 200);的效果：
