Почему 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)

    // Here's where the error happens:
    window.open(frame.toDataURL("image/png"));
}

выдает эту ошибку:

SECURITY_ERR: DOM Exception 18

Это не должно работать! Кто-нибудь может объяснить это, пожалуйста?

В спецификациях сказано:

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

Если изображение поступает с другого сервера, я не думаю, что вы можете использовать toDataURL ()

У меня сработала установка атрибута cross origin для объектов изображения (я использовал fabricjs)

    var c = document.createElement("img");
    c.onload=function(){
        // add the image to canvas or whatnot
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src='http://google.com/cat.png';

Для тех, кто использует fabricjs, вот как исправить Image.fromUrl

// patch fabric for cross domain image jazz
fabric.Image.fromURL=function(d,f,e){
    var c=fabric.document.createElement("img");
    c.onload=function(){
        if(f){f(new fabric.Image(c,e))}
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src=d;
};

Если изображение размещено на хосте, который устанавливает либо Access-Control-Allow-Origin, или Access-Control-Allow-Credentials, вы можете использовать Cross Origin Resource Sharing (CORS). Подробнее см. Здесь (атрибут crossorigin).

Другой вариант - иметь на сервере конечную точку, которая выбирает и обслуживает изображение. (например, http: // your_host / endpoint? url = URL ) Обратной стороной этого подхода является задержка и теоретически ненужная выборка.

Если есть другие альтернативные решения, мне было бы интересно о них услышать.

Кажется, есть способ предотвратить это, если хостинг изображений может предоставлять следующие HTTP-заголовки для ресурсов изображений, а браузер поддерживает CORS:

доступ-контроль-разрешение-происхождение: *
доступ-контроль-разрешить учетные данные: правда

Это указано здесь: http://www.w3.org/TR/cors/#use-cases

Наконец я нашел решение. Просто нужно добавить crossOriginтретий параметр в fromURLfunc

fabric.Image.fromURL(imageUrl, function (image) {
            //your logic
    }, { crossOrigin: "Anonymous" });

У меня была такая же проблема, и все изображения размещены в одном домене ... Итак, если у кого-то такая же проблема, вот как я решил:

У меня было две кнопки: одна для создания холста, а другая для создания изображения из холста. Это сработало только у меня, и извините, что я не знаю почему, когда я написал весь код на первой кнопке. Поэтому, когда я щелкаю по нему, генерируем холст и изображение одновременно ...

У меня всегда эта проблема с безопасностью, когда коды были на разных функциях ... = /

Я смог заставить его работать, используя это:

Напишите это в первой строке вашего .htaccessисходного сервера

Header add Access-Control-Allow-Origin "*"

Затем при создании <img>элемента сделайте следующее:

// jQuery
var img = $('<img src="http://your_server/img.png" crossOrigin="anonymous">')[0]

// or pure
var img = document.createElement('img');
img.src='http://your_server/img.png';
img.setAttribute('crossOrigin','anonymous');

Вы не можете ставить пробелы в своем удостоверении личности

Обновить

Я предполагаю, что изображение находится не на том сервере, где вы выполняете скрипт. Мне удалось продублировать вашу ошибку, когда я запустил ее на своей странице, но она работала нормально, когда я использовал изображение, размещенное в том же домене. Так что это связано с безопасностью - поместите изображение на свой сайт. Кто-нибудь знает, почему это так?

Если вы просто рисуете несколько изображений на холсте, убедитесь, что вы загружаете изображения из одного домена.

www.example.com отличается от example.com

Поэтому убедитесь, что ваши изображения и URL-адрес в адресной строке совпадают, www или нет.

Я использую fabric.js и могу решить эту проблему, используя toDatalessJSON вместо toDataURL:

canvas.toDatalessJSON({ format: 'jpeg' }).objects[0].src

Изменить: Забудь. Это приводит к тому, что в JPG экспортируется только фоновое изображение, без рисунка сверху, так что в конце концов это не совсем полезно.