fabric.js - toDataURL показывает пустую страницу, когда есть изображение на холсте

Question

Я использую fabric.js для моего приложения canvas, метод toDataURL работает корректно, кроме случаев, когда есть изображение на холсте. Когда я добавляю изображение на холст и вызываю toDataURL, он показывает мне пустую страницу.

//When i call it from chrome console 
canvas.toDataURL(); 
//It returns a working data url with no problem. 
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAGkCAYAAAAPPajHAAAgAElEQ…fpmwgogX1TrjoqP0FACewngtZh+iYCSmDflKuOyk8Q+H+CKCqUW0spTgAAAABJRU5ErkJggg==" 

//When i execute same code in a .js file it returns a data url which shows a blank image. 
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAGkCAYAAAAPPajHAAAKC0lEQ…sBAmEBAw6XJzoBA/YDBMICBhwuT3QCBuwHCIQFDDhcnugEHt/IAaW9dzALAAAAAElFTkSuQmCC" 

Интересно, что он работает на хром консоли разработчика, но не работает в .js файл, даже если это тот же код. Я заметил, что рабочий url данных заканчивается на '==', но другой нет. Однако я не знаю, что это значит.

Answer 1

Вы не много анализировали, но я пойду оттуда, почувствовав мое чувство кишки.

Образ изображения, которое вы используете, возможно, нарушает требования Cross-Origin Resource Sharing (CORS). Когда это произойдет, холст вернет пустое изображение, когда вы попытаетесь получить данные пикселя, используя canvas.toDataURL() или context.getImageData().

В основном это происходит, когда изображение не находится в том же домене, что и страница, или загружается из файла: // protocol.

Вы можете попробовать добавить следующие строки в объект изображения перед установкой источника:

image.crossOrigin = 'anonymous'; 
image.src = '...'; 

С тэгом:

<img crossOrigin='anonymous' src='...' alt='' /> 

Это запросить разрешение от сервера использовать кросс- изображения происхождение. Если сервер позволяет вам быть в порядке.

Если нет, вам придется либо скопировать изображение на свой собственный сервер, чтобы он загружался из того же домена, что и ваша страница, либо создавал прокси-страницу, которая загружает изображение извне и отправляет его на вашу страницу с прокси-страницы (это звучит сложно, но на самом деле это не так).

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

image.onload = function() { 
    /// now you can draw the image to canvas 
} 
image.crossOrigin = 'anonymous'; 
image.src = '...'; 

Answer 2

Проблема решена. Точка, которую я пропустил, - это вызов функции toDataURL перед загрузкой холста, поэтому он показывал мне пустую страницу.

canvas.loadFromJSON(json,function(){ 
      var dataURL = canvas.toDataURL(); 
      }); 

Это решило мою проблему, когда я дал toDataURL() функцию обратного вызова для функции loadFromJSON.

Но через некоторое время у меня возникла другая проблема с CORS, когда я попытался загрузить мои изображения из ведра s3, и я решил эту проблему как восходящее решение.