Чому 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 ()

Встановлення атрибуту перехресного походження для об’єктів зображення, які працювали у мене (я використовував 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, ви можете використовувати спільний доступ до ресурсів (CORS). Докладніше див. Тут (атрибут crossorigin).

Інший варіант - це те, що ваш сервер має кінцеву точку, яка отримує та обслуговує зображення. (наприклад, http: // your_host / endpoint? url = URL ) Недоліком цього підходу є затримка та теоретично непотрібне отримання.

Якщо є більше альтернативних рішень, мені було б цікаво про них почути.

Здається, існує спосіб запобігти цьому, якщо хостинг зображень може забезпечити такі заголовки HTTP для графічних ресурсів, а браузер підтримує CORS:

access-control-allow-origin: *
access-control-allow-credentials: істина

Про це йдеться тут: 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, без креслення зверху, тож врешті-решт воно було не зовсім корисним.