当前位置：网站首页>canvas 绘制图片

canvas 绘制图片

2022-06-24 09:32:00 【Time202051】

首先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启动