当前位置：网站首页>Canvas draw picture

Canvas draw picture

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

First getImageData Get all pixel data of the picture ( Array )
putImageData This is where the acquired data is plotted
Be careful ： Ordinary canvas Elements can be drawn directly like this , However, if it is an imported image, it must pass createImageData Create a transparent area , Then assign the obtained picture pixel data to createImageData Every pixel of

// 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 And transparency  +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>

This is getImageData Obtained pixel data . Every time 4 One for a group , by rgb And transparency
Insert picture description here
On the left canvas Draw the , Original picture on the right
For each rgb Of g Added a few pixels , therefore canvas Drawn green . Guess filter may be to modify each pixel value through some algorithm

Pay attention to the service , Right click Open with Live Server start-up
Insert picture description here