Ausführliche Erläuterung der domänenübergreifenden Escape-Praxis von Canvas

Wie kann das domänenübergreifende Canvas-Problem gelöst werden? Hier zeichnen wir die domänenübergreifenden Probleme und Lösungen auf, die beim Zeichnen mit Canvas auftreten.

Schauen wir uns zunächst die Implementierungsmethode an.

Das Zielbild besteht im Allgemeinen aus Bild + Text. Unabhängig davon, ob es sich um Bilder unterschiedlicher Größe oder um unvorhersehbare Texte handelt, kann dies mithilfe der Canvas-API-Methoden drawImage und fillText erreicht werden.

Der grundlegende Prozess ist wie folgt:

1. Canvas-Kontext abrufen – ctx

 const canvas = document.querySelector(selector)const ctx = canvas.getContext('2d')

2. Zeichnen

Ignorieren Sie den Inhalt des Bildes und zeichnen Sie es direkt mit drawImage auf die Leinwand.

 const image = new Image()image.src = srcimage.onload = () => { ctx.save() // Hier verwenden wir die folgenden Parameter, um this.ctx.drawImage(image, dx, dy, dWidth, dHeight aufzurufen ) dieses .ctx.restore()}

drawImage bietet drei Möglichkeiten, Parameter zu verwenden. Informationen zur spezifischen Verwendung finden Sie in der MDN-Dokumentation.

3. Bilddaten abrufen

Rufen Sie einfach die Methoden toBlob(), toDataURL() oder getImageData() auf, die vom HTMLCanvasElement-DOM-Objekt bereitgestellt werden.

 canvas.toBlob(blob => { // gewünschter Blob}, mimeType, EncoderOptions)

Der Standardwert von mimeType ist hier image/png. EncoderOptions gibt die Bildqualität an und kann zur Komprimierung verwendet werden, aber das mimeType-Format muss image/jpeg oder image/webp sein.

Wenn wir unter normalen Umständen das gezeichnete Bild ausgeben müssen, können wir die Methoden toBlob(), toDataURL() oder getImageData() der Leinwand aufrufen, um die Bilddaten abzurufen. Allerdings ist es etwas peinlich, wenn man auf domänenübergreifende Bilder trifft. Folgende Fehler können gemeldet werden:

Fehler beim Ausführen von „toBlob“ für „HTMLCanvasElement“: Befleckte Leinwände können möglicherweise nicht exportiert werden.

oder

Der Zugriff auf das Bild unter „https://your.image.src“ vom Ursprung „https://your.website“ wurde durch die CORS-Richtlinie blockiert: Auf der angeforderten Ressource ist kein „Access-Control-Allow-Origin“-Header vorhanden .

Schauen wir uns zunächst die zweite Situation an.

Zugriffskontrolle-Zulassen-Ursprung

Wenn Sie bestimmte Bildressourcen domänenübergreifend verwenden und der Dienst nicht korrekt auf den Access-Control-Allow-Origin-Header reagiert, wird die folgende Fehlermeldung gemeldet:

Der Zugriff auf das Bild unter „https://your.image.src“ vom Ursprung „https://your.website“ wurde durch die CORS-Richtlinie blockiert: Auf der angeforderten Ressource ist kein „Access-Control-Allow-Origin“-Header vorhanden .

Das bedeutet, dass der domänenübergreifende Zugriff nicht erlaubt ist. Dann können Sie versuchen, den Hintergrund den Wert von Access-Control-Allow-Origin in * oder your.website ändern zu lassen, oder stattdessen dieselbe Domänenressource verwenden (denken Sie darüber nach?) .

Als nächstes lösen wir die erste Situation.

 img.crossOrigin = 'Anonymous'

Um eine Verletzung der Privatsphäre des Benutzers zu vermeiden, die durch das unerlaubte Abrufen von Remote-Website-Informationen (z. B. GPS und andere Informationen, Sie können Exif nach Details durchsuchen) verursacht wird, wird beim Aufruf von toBlob(), toDataURL() oder getImageData() ein Sicherheitsfehler ausgegeben. Leinwand:

Fehler beim Ausführen von „toBlob“ für „HTMLCanvasElement“: Befleckte Leinwände können möglicherweise nicht exportiert werden.

Wenn Ihr Bilddienst die ursprungsübergreifende Verwendung zulässt (falls nicht, lesen Sie den vorherigen Artikel), sollten Sie erwägen, das Attribut „crossOrigin“ zum img-Element hinzuzufügen, d. h.:

 const image = new Image()image.crossOrigin = 'Anonymous'image.src = src

Auf diese Weise können Sie die Bilddaten erhalten. Wenn Sie es nicht finden können, verwenden Sie Ressourcen aus derselben Domäne~

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.