首先getImageData获取图片所有像素数据(数组)
putImageData 就是将获取的数据绘制的地方
注意:普通canvas元素可以直接这样绘制,但是如果是导入的图片就要通过createImageData创建一个透明的区域,再将获取到的图片像素数据赋值给createImageData的每个像素
// var canvas = document.getElementById('canvas');
// var ctx = canvas.getContext('2d');
var canvasa = document.getElementById('canvasa');
var ctxa = canvasa.getContext('2d');
var canvasb = document.getElementById('canvasb');
var ctxb = canvasb.getContext('2d');
// ctx.fillStyle = "green"
// ctx.fillRect(0, 0, 50, 50)
var imageData;
var image = new Image()
image.src = './image.jfif'
image.onload = function () {
ctxb.drawImage(this, 0, 0, this.width, this.height)
imageData = ctxb.getImageData(0, 0, canvasb.width, canvasb.height)
console.log(imageData);
var cImage = ctxa.createImageData(canvasa.width, canvasa.height)
for (var i = 0; i < imageData.data.length; i += 4) { //rbg和透明度一组 +4
cImage.data[i + 0] = imageData.data[i + 0]
cImage.data[i + 1] = imageData.data[i + 1]+ 16
cImage.data[i + 2] = imageData.data[i + 2]
cImage.data[i + 3] = imageData.data[i + 3]
}
console.log(cImage);
ctxa.putImageData(cImage, 0, 0, 0, 0, canvasa.width, canvasa.height)
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvasa" width="500" height="300" style=" border: 1px solid #c03;"></canvas>
<canvas id="canvasb" width="500" height="300" style=" border: 1px solid #06C1AE;"></canvas>
<!-- <canvas id="canvas" width="500" height="300" style=" border: 1px solid #1122c0;"></canvas> -->
<!-- <script src="./image.js"> -->
<!-- </script> -->
<script src="./image1.js"></script>
</body>
</html>
这个就是getImageData获取的像素数据。每4个为一组,为rgb和透明度
左边canvas绘制的,右边原图片
给每个rgb的g加了几像素,所以canvas绘制的偏绿色。猜测滤镜可能就是通过一些算法修改每个像素值
注意这个要起服务,右键Open with Live Server启动