Home > Web Front-end > H5 Tutorial > body text

HTML5 Canvas image extraction, pixel information acquisition, hit detection

黄舟
Release: 2017-02-27 15:41:09
Original
3997 people have browsed it

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>
Copy after login

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(&#39;myCanvas&#39;);
let cxt = canvas.getContext(&#39;2d&#39;);
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 = &#39;#fff&#39;;
    cxt.arc(0, -l/2, l/7, 0, PI*2, 0);
    cxt.fill();
    cxt.beginPath();
    cxt.fillStyle = &#39;#000&#39;;
    cxt.arc(0, l/2, l/7, 0, PI*2, 0);
    cxt.fill();
};

createTaiChi();
Copy after login

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);    }}
Copy after login

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);
Copy after login

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(&#39;img&#39;);
img.src = data;document.body.appendChild(img);
Copy after login

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(&#39;img&#39;)[0];
cxt.drawImage(img, 0, 0);let data = canvas.toDataURL();
Copy after login

The browser will report an error

HTML5 Canvas image extraction, pixel information acquisition, hit detection

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);
Copy after login

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);
Copy after login


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);
Copy after login

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();}
Copy after login

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)!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!