suchen

Heim  >  Artikel  >  Web-Frontend  >  So lösen Sie domänenübergreifende Probleme beim Zeichnen auf Leinwand

So lösen Sie domänenübergreifende Probleme beim Zeichnen auf Leinwand

不言
不言Original
2018-06-14 11:25:333973Durchsuche

In diesem Artikel werden hauptsächlich relevante Informationen vorgestellt, die die beim Zeichnen von Leinwand auftretenden domänenübergreifenden Probleme ausführlich erläutern. Der Inhalt ist jetzt recht gut und dient als Referenz.

Beim Zeichnen eines externen Linkbilds im Canvas tritt ein domänenübergreifendes Problem auf.

Ein Beispiel ist wie folgt: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>crossorigin</title>
</head>
<body>
    <canvas width="600" height="300" id="canvas"></canvas>
    <img id="image" alt="">
    <script>
        var canvas = document.getElementById(&#39;canvas&#39;);
        var ctx = canvas.getContext(&#39;2d&#39;);
        var image = new Image();
        image.onload = function() {
            ctx.drawImage(image, 0, 0);
            document.getElementById(&#39;image&#39;).src = canvas.toDataURL(&#39;image/png&#39;);
        };
        image.src = &#39;https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg&#39;;
    </script>
</body>

Wenn Sie diese Seite in einem Browser öffnen, werden Sie dieses Problem finden:

Ungefangene DOMException: Fehler beim Ausführen von „toDataURL“ auf „HTMLCanvasElement“: Befleckte Leinwände dürfen nicht exportiert werden.

Dies wird durch die CORS-Richtlinie eingeschränkt und es treten domänenübergreifende Probleme auf , obwohl es verwendet werden kann Bild, aber das Zeichnen auf die Leinwand verschmutzt die Leinwand. Sobald eine Leinwand verschmutzt ist, können die Daten der Leinwand nicht extrahiert werden toBlob(), toDataURL(), oder getImageData(. )-Methoden können nicht verwendet werden; bei Verwendung dieser Methoden wird der obige Sicherheitsfehler ausgelöst

Dies ist ein beunruhigendes Problem, aber glücklicherweise hat img das Crossorigin-Attribut hinzugefügt, das bestimmt, ob die CORS-Funktion während des aktiviert ist Bildaufnahmeprozess: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>crossorigin</title>
</head>
<body>
    <canvas width="600" height="300" id="canvas"></canvas>
    <img id="image" alt="">
    <script>
        var canvas = document.getElementById(&#39;canvas&#39;);
        var ctx = canvas.getContext(&#39;2d&#39;);
        var image = new Image();
        image.setAttribute(&#39;crossorigin&#39;, &#39;anonymous&#39;);
        image.onload = function() {
            ctx.drawImage(image, 0, 0);
            document.getElementById(&#39;image&#39;).src = canvas.toDataURL(&#39;image/png&#39;);
        };
        image.src = &#39;https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg&#39;;
    </script>
</body>

Wenn Sie die beiden oben genannten JS-Codeteile vergleichen, finden Sie diese zusätzliche Zeile: 

image.setAttribute(&#39;crossorigin&#39;, &#39;anonymous&#39;);

Es ist so einfach, die perfekte Lösung!

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein die chinesische PHP-Website!

Verwandte Empfehlungen:

Über die Eigenschaften von Leinwandlinien

So verwenden Sie Leinwand zum Implementieren von Bildmosaiken

Das obige ist der detaillierte Inhalt vonSo lösen Sie domänenübergreifende Probleme beim Zeichnen auf Leinwand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JS canvas
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie Canvas zum Implementieren eines BildmosaiksNächster Artikel：So verwenden Sie Canvas zum Implementieren eines Bildmosaiks

In Verbindung stehende Artikel

Mehr sehen