HTML5-Canvas-Bildextraktion, Erfassung von Pixelinformationen, Treffererkennung

Heute stellen wir hauptsächlich die leistungsfähigeren Funktionen in Canvas vor

Zum Beispiel das Extrahieren des Canvas-Inhalts in ein Bild
Erhalten und Ändern der Pixelinformationen des Canvas
und den Treffer Erkennung der Leinwand
Zuerst muss ich noch eine Leinwand erstellen

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

Bildextraktion

Als erstes muss klargestellt werden, dass
toDataURL( ) ist eine Methode des Canvas-Objekts selbst und nicht des Umgebungsobjekts
Diese Methode extrahiert den Inhalt von Canvas in ein Bild (Base64-Kodierung)
Sehen wir uns an, wie man sie verwendet

Leinwand in Bild umwandeln

Ich bin frei. Es ist in Ordnung, Leinwand zu verwenden, um ein Tai-Chi-Diagramm zu erstellen
Der js-Code lautet wie folgt

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

Und dann verwenden CSS, damit es so aussieht, als würde es sich weiter drehen

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

Achten Sie auf die CSS-Breite und -Höhe, die ich hier eingestellt habe. Verdoppeln Sie die Breite und Höhe der Leinwand
(Dadurch kann die Leinwand übersichtlicher werden)

---

Als nächstes zeichne ich, was ich auf die Leinwand gezeichnet habe. Um das Tai-Chi-Diagramm in ein Bild umzuwandeln
müssen Sie zunächst die Base64-Kodierung der Leinwand erhalten

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

Hier drucken wir es auf der Konsole aus, um zu sehen, wie es aussieht

Wir wollen es in ein Bild umwandeln
Das müssen wir nur Erstellen Sie ein IMG-Tag und setzen Sie dann src auf Daten

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

Zu diesem Zeitpunkt werden wir feststellen, dass sich auf der Seite ein statisches Tai Chi befindet. Die Größe des Bildes
entspricht der Breite/ Höhenattribut der Leinwand, 500×500

Einschränkungen der Same-Origin-Richtlinie

Beachten Sie, dass diese Methode durch die Same-Origin-Richtlinie eingeschränkt ist
Zum Beispiel, wenn ich auf der Seite bin Fügen Sie ein lokales Bild hinzu
und zeichnen Sie dieses Bild dann in die Leinwand

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

Der Browser meldet einen Fehler

Wenn wir einen lokalen Server verwenden Sie können diese Methode
verwenden, um zu beweisen, dass diese Methode durch die Same-Origin-Richtlinie eingeschränkt ist

Pixelinformationen

Verwenden Sie getImageData(x, y, dx, dy), um das Pixel zu erhalten Informationen der Leinwand
Die Methode wird vom Umgebungsobjekt aufgerufen (wir sind hier cxt)
(unterliegt ebenfalls der gleichen Ursprungsrichtlinie)
Die ersten beiden Parameter sind die Startkoordinaten der zu erstellenden Bildinformationen erhalten, und die letzten beiden Parameter sind die Breite der zu erhaltenden Bildinformationen. Höhe
(ähnlich der Funktion zum Zeichnen von Rechtecken)
Diese Methode gibt ein ImageData-Objekt zurück (einschließlich Pixelinformationsarraydaten und Breite/Höhe)
Wir verwenden hauptsächlich das Datenattribut dieses Objekts

Die Größe unserer Leinwand beträgt 500×500
Das Abrufen aller Pixelinformationen auf der Leinwand erfolgt also so

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

Wir haben festgestellt, dass die Länge dieses Arrays 100 W beträgt

---

Wenn unsere Leinwand vier Pixel hat
Jede Pixelinformation ist unterteilt in vier RGBA-Werte
Dann sollte die Array-Länge 4×4 = 16 sein
Sie sind
1R 1G 1B 1A
2R 2G 2B 2A
3R 3G 3B 3A
4R 4G 4B 4A

---

Wir sind hier. Die Leinwand hat insgesamt 500×500 = 25W Pixel
, also beträgt die Größe des Pixelinformationsarrays 25W×4 = 100W

Wir können Verwenden Sie auch die Methode createImageData(width, height)
, um ein leeres imageData-Objekt zu erstellen

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

---

Verwenden Sie putImageData(imgData, x, y), um Überschreiben Sie die ursprüngliche Leinwand mit Ihren Bildpixeln
imgData ist das imgData-Objekt, >

cxt.putImageData(blankImg, 0, 0);

Treffererkennung

isPointInPath() kann erkennen, ob sich das Pixel innerhalb des Pfadbereichs befindet

Die Verwendung ist sehr einfach

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

isPointInStroke() wird verwendet, um zu erkennen, ob sich das Pixel auf dem Pfad befindet, und die Verwendung ist ähnlich

---

Die Kompatibilität ist jedoch nicht sehr gut

Das Obige ist der Inhalt von HTML5-Canvas-Bildextraktion, Pixelinformationserfassung und Treffererkennung. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).