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

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>

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!