Cross-Origin-Problem in Canvas toDataURL()

Obwohl ausreichend Ruhe gewährleistet ist, kann es bei Benutzern zu Sicherheitsausnahmen kommen, wenn sie canvas.toDataURL() verwenden . Betrachten Sie den folgenden Code:

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

Dieser Code versucht, ein Bild von einem anderen Server als Base64-Daten in einem neuen Fenster zu öffnen, löst jedoch eine SECURITY_ERR-Ausnahme aus.

Gemäß den Spezifikationen ist die toDataURL()-Methode von Ein Canvas-Element löst eine SECURITY_ERR-Ausnahme aus, wenn sein Origin-Clean-Flag auf „false“ gesetzt ist. Wenn ein Bild von einem anderen Server geladen wird, wird die Leinwand beschädigt und ihr Origin-Clean-Flag wird auf „false“ gesetzt.

Daher ist es nicht möglich, toDataURL() direkt zu verwenden, um Base64-Daten für Bilder abzurufen, von denen sie stammen verschiedene Server. Für den Umgang mit ursprungsübergreifenden Bildern können alternative Techniken wie CORS oder Proxys erforderlich sein.