Maison >interface Web >Tutoriel H5 >Comment résoudre les problèmes inter-domaines rencontrés lors du dessin sur toile

Comment résoudre les problèmes inter-domaines rencontrés lors du dessin sur toile

不言original: 2018-06-14 11:25:334017parcourir

Cet article présente principalement des informations pertinentes qui expliquent en détail les problèmes inter-domaines rencontrés lors du dessin de canevas. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Lors du dessin d'une image de lien externe dans Canvas, nous rencontrerons un problème inter-domaines.

Un exemple est le suivant :

<!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>

Lorsque vous ouvrez cette page dans un navigateur, vous rencontrerez ce problème :

DOMException non interceptée : échec de l'exécution de 'toDataURL' sur 'HTMLCanvasElement' : les canevas contaminés ne peuvent pas être exportés.

Ceci est limité par la politique CORS et il y aura des croisements problèmes de domaine, bien que des images puissent être utilisées, mais dessiner sur le canevas polluera le canevas. Une fois qu'un canevas est pollué, les données du canevas ne peuvent pas être extraites. Par exemple, les méthodes canevas toBlob(), toDataURL() ou getImageData(). ne peut pas être utilisé ; lors de l'utilisation de ces méthodes, l'erreur de sécurité ci-dessus sera parfois générée

Il s'agit d'un problème pénible, mais heureusement, img a ajouté l'attribut crossorigin. Cet attribut détermine si la fonction CORS est activée lors de l'acquisition de l'image. processus :

<!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>

En comparant les deux morceaux de code JS ci-dessus, vous trouverez cette ligne supplémentaire :

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

C'est aussi simple que ça, une solution parfaite !

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, s'il vous plaît. faites attention au site Web PHP chinois !

Recommandations associées :

À propos des propriétés des lignes de canevas

Comment utiliser le canevas pour implémenter une mosaïque d'images

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JS canvas

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser Canvas pour implémenter une mosaïque d'imagesArticle suivant：Comment utiliser Canvas pour implémenter une mosaïque d'images

Articles Liés

Voir plus