Problema de origem cruzada no Canvas toDataURL()

Apesar de garantir descanso suficiente, os usuários podem encontrar exceções de segurança ao usar canvas.toDataURL() . Considere o seguinte código:

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

Este código tenta abrir uma imagem de um servidor diferente como dados base64 em uma nova janela, mas gera uma exceção SECURITY_ERR.

De acordo com as especificações, o método toDataURL() de um elemento canvas lança uma exceção SECURITY_ERR se seu sinalizador Origin-clean estiver definido como falso. Quando uma imagem é carregada de um servidor diferente, a tela é corrompida e seu sinalizador de limpeza de origem é definido como falso.

Portanto, não é possível usar toDataURL() diretamente para obter dados base64 para imagens provenientes de servidores diferentes. Técnicas alternativas, como CORS ou proxies, podem ser necessárias para lidar com imagens de origem cruzada.