So lösen Sie domänenübergreifende Probleme beim Zeichnen auf Leinwand-H5-Tutorial-php.cn

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

不言

Freigeben： 2018-06-14 11:25:33

Original

3929 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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!