Extraction d'images HTML5 Canvas, acquisition d'informations sur les pixels, détection d'impacts

Aujourd'hui, nous introduisons principalement les fonctions les plus puissantes du canevas

Par exemple, extraire le contenu du canevas dans une image
obtenir et modifier les informations sur les pixels du canevas
et le hit détection du canevas
Tout d'abord, je dois encore créer un canevas

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

Extraction d'image

La première chose à préciser est que
toDataURL( ) est une méthode de l'objet canevas lui-même et non de l'objet environnement
Cette méthode extraira le contenu du canevas dans une image (encodage base64)
Voyons comment l'utiliser

Convertir le canevas en image

Je suis libre C'est bien d'utiliser le canevas pour créer un diagramme de Tai Chi
Le code js est le suivant

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();

Et puis utiliser css pour donner l'impression qu'il continue de tourner

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

Faites attention à la largeur et à la hauteur CSS que j'ai définies ici. Doublez la largeur et la hauteur de la toile
(Cela rendra la toile plus claire)

---

Ensuite, je vais dessiner ce que j'ai dessiné sur la toile. Pour convertir le diagramme de Tai Chi en image
vous devez d'abord obtenir l'encodage base64 de la toile

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

Ici, nous l'imprimons sur la console pour voir à quoi cela ressemble

Nous voulons le transformer en image
Il nous suffit de le faire. créez une balise img puis définissez src sur data

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

À ce moment, nous constaterons qu'il y a un Tai Chi statique sur la page La taille de l'image
est la même que la largeur/ attribut height du canevas, 500×500

Restrictions de la politique de même origine

Notez que cette méthode est restreinte par la politique de même origine
Par exemple, si je suis sur la page Ajoutez une image locale
puis dessinez cette image dans le canevas

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

Le navigateur signalera une erreur

Si nous utilisons un serveur local Vous pouvez utiliser cette méthode
pour prouver que cette méthode est restreinte par la politique de même origine

Informations sur les pixels

Utilisez getImageData(x, y, dx, dy) pour obtenir le pixel informations du canevas
La méthode est appelée par l'objet environnement (nous sommes ici)
(également soumis à la même politique d'origine)
Les deux premiers paramètres sont les coordonnées de départ des informations de l'image à obtenu, et les deux derniers paramètres sont la largeur des informations d'image à obtenir. Hauteur
(similaire à la fonction de dessin de rectangle)
Cette méthode renvoie un objet ImageData (y compris les données du tableau d'informations sur les pixels et la largeur/hauteur)
Nous utilisons principalement l'attribut data de cet objet

La taille de notre canevas est de 500×500
Donc, obtenir toutes les informations sur les pixels sur le canevas est comme ça

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

Nous avons constaté que la longueur de ce tableau est de 100w

---

Si notre toile a quatre pixels
Chaque information de pixel est divisé en quatre valeurs RGBA
Ensuite, la longueur du tableau doit être de 4×4 = 16
Ils sont
1R 1G 1B 1A
2R 2G 2B 2A
3R 3G 3B 3A
4R 4G 4B 4A

---

Nous sommes ici La toile a un total de 500×500 = 25w pixels
, donc la taille du tableau d'informations en pixels est de 25w×4 = 100w

Nous pouvons utilisez également la méthode createImageData(width, height)
pour créer un objet imageData vierge

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

---

Utilisez putImageData(imgData, x, y) pour écrasez le canevas d'origine avec les pixels de votre image
imgData est l'objet imgData, x, y est la coordonnée de départ de la superposition
Par exemple, je superpose l'image vierge 250×250 que nous avons créée ci-dessus sur le canevas d'origine

cxt.putImageData(blankImg, 0, 0);

Détection des coups

isPointInPath() peut détecter si le pixel se trouve dans la zone du chemin
L'utilisation est très simple

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

---

isPointInStroke() est utilisé pour détecter si le pixel est sur le chemin, et l'utilisation est similaire
Cependant, sa compatibilité n'est pas très bonne

Ce qui précède est le contenu de Extraction d'images HTML5 Canvas, acquisition d'informations sur les pixels et détection des hits Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !