Zusammenfassung der Freischaltung von N-Positionen für den domänenübergreifenden Export von Bildern aus der Leinwand

In diesem Artikel wird eine Zusammenfassung von N-Stellungen zum Freischalten domänenübergreifend exportierter Bilder aus der Leinwand vorgestellt. Die Details lauten wie folgt:

Nicht abgefangene DOMException: „toDataURL“ konnte nicht auf „HTMLCanvasElement“ ausgeführt werden: Befleckte Leinwände können möglicherweise nicht exportiert werden.

Ich glaube, jeder ist auf den oben genannten Fehler gestoßen, als er Canvas zum Ausführen von toDataUrl zum Exportieren von Bildern verwendet hat. Der Domänenname des Bildservers unterscheidet sich vom aktuellen, da die Sicherheitsrichtlinie keinen domänenübergreifenden Export von Bildern zulässt.

Wenn das Bild zu Base64 wird, muss nicht über den Domänennamen gesprochen werden, und natürlich gibt es keine domänenübergreifenden Aspekte

Hinweis: Konvertieren Sie das Bild in Base64 und erhöhen Sie die Bilddateigröße. Es wird nicht empfohlen, es in Base64 zu konvertieren, da dies sonst die Ladezeit der Webseite verlängert und die Geschwindigkeit der Website beeinträchtigt für kleine Bilder.

Das heißt, der durch die Anforderung des Bilds zurückgegebene Antwortheader enthält Access-Control-Allow-Origin wobei der Wert auf * (domänenübergreifende Anfragen von allen Websites zulässig) oder den aktuellen Domänennamen der Website (domänenübergreifende Anfragen nur zulässig) festgelegt ist feste Domänennamen) und dann lädt das Frontend das Bild-Cross-Origin-Attribut img.crossOrigin=anonymous。 Der spezifische Code lautet wie folgt

 var canvas = document.getElementById('myCanvas') var ctx = canvas.getContext('2d') var img = document.createElement('img') img.crossOrigin=anonymous img.src = 'https://p4-q.mafengwo.net/s12/M00/CA/3B/wKgED1w8fL6ADk16AAXyDaz2bdU61.jpeg' img.onload = function() { ctx.drawImage(img,0,0,500,300); console.log(canvas. toDataURL()) }

Auf diese Weise können domänenübergreifende Probleme einfach durch die Kombination von Vorder- und Rückseite gelöst werden

Verzeihen Sie mein unfreundliches Lachen, das ist tatsächlich eine Lösung des Problems.

ABER in tatsächlichen Projekten werden Bilder im Allgemeinen auf CDN gespeichert, daher ist diese Methode nicht realistisch.