HTML5 Canvas image extraction, pixel information acquisition, hit detection

Today we mainly introduce the more powerful functions in canvas

For example, extracting the canvas content into a picture
Getting and modifying the pixel information of the canvas
And the hit detection of the canvas
First I still need to create the canvas

<canvas id="myCanvas" width=500 height=500></canvas>

Image extraction

The first thing to make clear is that
toDataURL() is a method of the canvas object itself rather than the environment object
This method will extract the content of the canvas into an image (base64 encoding)
Let’s take a look at how to use it

Convert canvas into an image

I have nothing to do with it. The canvas made a Tai Chi diagram
The js code is as follows

let canvas = document.getElementById('myCanvas');
let cxt = canvas.getContext('2d');
let l = canvas.width/2;
const PI = Math.PI;
cxt.translate(l, l);let createTaiChi = () => {
    cxt.clearRect(-l, -l, l, l);
    cxt.arc(0, 0, l, 0, 2*PI, 0);
    cxt.stroke();
    cxt.beginPath();
    cxt.arc(0, -l/2, l/2, -PI/2, PI/2, 0);
    cxt.arc(0, l/2, l/2, 3/2*PI, PI/2, 1);
    cxt.arc(0, 0, l, PI/2, PI*3/2, 0);
    cxt.fill();
    cxt.beginPath();
    cxt.fillStyle = '#fff';
    cxt.arc(0, -l/2, l/7, 0, PI*2, 0);
    cxt.fill();
    cxt.beginPath();
    cxt.fillStyle = '#000';
    cxt.arc(0, l/2, l/7, 0, PI*2, 0);
    cxt.fill();
};

createTaiChi();

And then cooperate with the css to make it look like a continuous rotation

#myCanvas {    
width: 250px;    
height: 250px;    
margin: 100px;    
animation: rotate 3s linear infinite;
}@keyframes rotate{
    0% {        
    transform: rotateZ(0);    
    }
    100% {        
    transform: rotateZ(360deg);    }}

Note that the css width and height I set here are wider than the original width of the canvas Double the height and the small size
(This can make the canvas clearer)

---

Next I will convert the Tai Chi diagram I drew on the canvas into a Picture
First we need to get the base64 encoding of canvas

let data = canvas.toDataURL();console.log(data);

Here we print it on the console to see what it looks like

We want to turn it into a picture ,
Just create an img tag, and then set src to data

let img = document.createElement('img');
img.src = data;document.body.appendChild(img);

At this time we will find that there is an additional static Tai Chi diagram on the page
The size is related to the width/ of the canvas The height attribute is the same 500×500

Same origin policy restriction

Note that this method is restricted by the same origin policy
For example, if I add a local image to the page
and then This picture is drawn into canvas

let img = document.getElementsByTagName('img')[0];
cxt.drawImage(img, 0, 0);let data = canvas.toDataURL();

The browser will report an error

If we use a local server, we can use this method
Prove that this method is acceptable Same-origin policy restrictions

Pixel information

Use getImageData(x, y, dx, dy) to obtain canvas pixel information
The method is called by the environment object (we are cxt here)
(also subject to the same origin policy)
The first two parameters are the starting coordinates of the image information to be obtained, and the last two parameters are the width and height of the image information to be obtained
(similar to the rectangle drawing function)
This method returns an ImageData object (including pixel information array data and width/height)
We mainly use the data attribute of this object

The size of our canvas is 500×500
So getting all the pixel information on the canvas is like this

console.log(cxt.getImageData(0, 0, 500, 500).data);

We found that the length of this array is 100w

---

If our canvas has four pixels
Each pixel information is divided into four values ​​​​of RGBA
Then the array length should be 4×4 = 16
They are
1R 1G 1B 1A
2R 2G 2B 2A
3R 3G 3B 3A
4R 4G 4B 4A

---

Our canvas here has a total of 500×500 = 25w pixels
So the pixel information array size is 25w×4 = 100w

We can also use the createImageData(width, height) method
Create a blank imageData object

let blankImg = cxt.createImageData(250, 250);
console.log(blankImg);

---

Use putImageData(imgData, x, y) to overlay your image pixels on the original canvas
imgData is the imgData object, x, y are the starting coordinates of the overlay
For example, if I put the above The created 250×250 blank image covers the original canvas

cxt.putImageData(blankImg, 0, 0);

Hit detection

isPointInPath() can detect whether the pixel is within the path area
The usage is very simple

cxt.rect(100, 100, 300, 300);if(cxt.isPointInPath(200, 200)){
    cxt.stroke();}

---

isPointInStroke() is used to detect whether the pixel is on the path. The usage is similar
but its compatibility is not very good

The above is HTML5 Canvas image extraction, pixel information acquisition, and hit detection. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!