Проблема перекрестного происхождения в Canvas toDataURL()

Несмотря на обеспечение достаточного отдыха, пользователи могут столкнуться с исключениями безопасности при использовании Canvas.toDataURL() . Рассмотрим следующий код:

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

Этот код пытается открыть изображение с другого сервера как данные base64 в новом окне, но вызывает исключение SECURITY_ERR.

Согласно спецификациям метод toDataURL() элемент холста выдает исключение SECURITY_ERR, если для его флага очистки источника установлено значение false. Когда изображение загружается с другого сервера, холст искажается, и для его флага очистки источника устанавливается значение false.

Поэтому невозможно напрямую использовать toDataURL() для получения данных base64 для изображений, полученных из разные серверы. Для обработки изображений из разных источников могут потребоваться альтернативные методы, такие как CORS или прокси.