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 :

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"));
}

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 déclenche une exception SECURITY_ERR.

Selon les spécifications, la méthode toDataURL() de 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 corrompu 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.