Получите ошибку безопасности при сохранении объекта canvas в изображение

Question

ну не совсем.Если я просто рисую (ex линии, прямоугольник ...) и пытаюсь экспортировать холст как изображение.Работает нормально.Однако, если я использую функцию canvas.drawImage(...), которая помещает изображение на холст.Затем попытайтесь экспортировать его как изображение, я получаю следующую ошибку безопасности:

[16:05:05.326] uncaught exception: [Exception... "Security error"  code: "1000" nsresult: 
"0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)"  location: 
"http://127.0.0.1:8020/Blackboard/Models/BlackboardCanvas.js Line: 82"]

Я предполагал, что canvas.drawImage будет брать необработанный пиксель из изображения и вставлять его на холст, нодумаю, я был неправ.Что я могу сделать?

Answer 1

Поведение, которое вы описываете, соответствует спецификации . Выдержки:

Все элементы canvas должны начинаться с их origin-clean , установленного в true. Флаг должен быть установлен в false, если происходит любое из следующих действий:

• Метод 2D-контекста элемента drawImage() вызывается с HTMLImageElement или HTMLVideoElement, происхождение которого не совпадает с происхождением объекта Document, которому принадлежит элемент canvas.

[...]

Всякий раз, когда вызывается метод toDataURL() элемента canvas, флаг origin-clean которого имеет значение false, метод должен вызывать исключение SecurityError.

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

Answer 2

Вы ждете, пока изображение полностью загрузится, прежде чем звонить canvas.drawImage?

var img = new Image();
img.onload = function(){
    canvas.drawImage(img,0,0);
    //do whatever else here
};
img.src = 'foo.jpg';