Einführung in die domänenübergreifende Canvas-Lösung

Dieser Artikel bietet Ihnen eine Einführung in die domänenübergreifende Canvas-Lösung. Freunde in Not können darauf verweisen.

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

Sehen wir uns zunächst die Implementierungsmethode an.

Implementierungsmethode

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:

Den Canvas-Kontext abrufen – ctx

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

Zeichnen

Ignorieren Sie den Inhalt auf dem Bild und Verwenden Sie direkt drawImage, um es zu zeichnen. Zeichnen Sie einfach auf die Leinwand.

const image = new Image()
image.src = src
image.onload = () => {
    ctx.save()
    // 这里我们采用以下参数调用
    this.ctx.drawImage(image, dx, dy, dWidth, dHeight)
    this.ctx.restore()
}

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

Bilddaten abrufen

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

canvas.toBlob(blob => {
    // 你要的 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.

Canvas domänenübergreifend

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

Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.

oder

Access to image at 'https://your.image.src' from origin 'https://your.website' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Schauen wir uns zunächst die zweite Situation an.

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

Access to image at 'https://your.image.src' from origin 'https://your.website' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Es bedeutet, dass der domänenübergreifende Zugriff nicht zulässig ist. Dann können Sie versuchen, den Hintergrund den Wert von Access-Control-Allow-Origin in * oder your.website ändern zu lassen oder dieselbe Domäne zu verwenden Ressource stattdessen (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) verursacht wird, können Sie beim Anruf nach Exif suchen, um Details zu erhalten toBlob( ), toDataURL() oder getImageData() von Canvas geben einen Sicherheitsfehler aus:

Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Wenn Ihr Bilddienst die domänenübergreifende Verwendung zulässt (falls nicht, lesen Sie den vorherigen Artikel), sollten Sie das Hinzufügen von Add in Betracht ziehen das crossOrigin-Attribut, das heißt:

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

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

Das obige ist der detaillierte Inhalt vonEinführung in die domänenübergreifende Canvas-Lösung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!