Maison > interface Web > js tutoriel > Pourquoi canvas.toDataURL() lève-t-il une exception de sécurité lors du chargement d'images à partir de différents serveurs ?

Pourquoi canvas.toDataURL() lève-t-il une exception de sécurité lors du chargement d'images à partir de différents serveurs ?

Linda Hamilton
Libérer: 2024-10-31 10:07:02
original
1013 Les gens l'ont consulté

Why Does canvas.toDataURL() Throw a Security Exception When Loading Images From Different Servers?

Problème d'origine croisée dans Canvas toDataURL()

Malgré un repos suffisant, les utilisateurs peuvent rencontrer des exceptions de sécurité lors de l'utilisation de canvas.toDataURL() . Considérez le code suivant :

<code class="javascript">var frame = document.getElementById("viewer");
frame.width = 100;
frame.height = 100;

var ctx = frame.getContext("2d");
var img = new Image();
img.src = "http://www.ansearch.com/images/interface/item/small/image.png"

img.onload = function() {
    // Draw image
    ctx.drawImage(img, 0, 0)

    // Security exception occurs here:
    window.open(frame.toDataURL("image/png"));
}</code>
Copier après la connexion

Ce code tente d'ouvrir une image d'un serveur différent en tant que données base64 dans une nouvelle fenêtre, mais il génère une exception SECURITY_ERR.

Selon les spécifications , la méthode toDataURL() d'un élément canvas lève une exception SECURITY_ERR si son indicateur origin-clean est défini sur false. Lorsqu'une image est chargée à partir d'un autre serveur, le canevas est entaché et son indicateur origin-clean est défini sur false.

Par conséquent, il n'est pas possible d'utiliser directement toDataURL() pour obtenir des données base64 pour les images provenant de différents serveurs. Des techniques alternatives, telles que CORS ou des proxys, peuvent être nécessaires pour gérer les images d'origine croisée.

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal