Изображение FabricJs не загружается при импорте JSON

Question

Im пытается загрузить некоторые изображения на холст с помощью fabricjs. Они были экспортированы с помощью fabricjs уже до использования JSON.stringify (canvas);.

Это код, я использую, чтобы импортировать объект JSON:

var canvas = this.__canvas = new fabric.Canvas('c'); 
var json2 = {"objects":[{"type":"image","originX":"left","originY":"top","left":0,"top":0,"width":257,"height":258,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","src":"http://fabricjs.com/article_assets/9.png","filters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet"}],"background":""}; 

canvas.loadFromJSON(json2, canvas.renderAll.bind(canvas)); 

Когда я сделать то же самое с объектом Rect он получает нагруженный хорошо. Только изображения не загружаются. Я добавил пример скрипки здесь: http://jsfiddle.net/waaqk9tr/5/

Что здесь может быть неправильно?

Answer 1

Сервер fabricjs.com не разрешает запросы на перекрестный поиск. Если вы посмотрите в сети инспектора вашего браузера или консоли, вы увидите сообщение об ошибке:

[Error] Cross-origin image load denied by Cross-Origin Resource Sharing policy. 
    fromObject (fabric.min.js, line 5) 
    (anonymous function) (fabric.min.js, line 1) 
    forEach 
    enlivenObjects (fabric.min.js, line 1) 
    _enlivenObjects (fabric.min.js, line 3) 
    loadFromJSON (fabric.min.js, line 3) 
    (anonymous function) (_display, line 39) 
    j (jquery.min.js, line 2) 
    add (jquery.min.js, line 2) 
    ready (jquery.min.js, line 2) 
    onload (_display, line 26) 

Возможно, вы просто играли вокруг, и вы действительно не нужно, чтобы загрузить изображение из fabricjs.com. Если бы вы это сделали, вам пришлось бы использовать обход. Вы видите, ваш браузер отправляет заголовок Origin с доменом сайта, на котором запущен ваш javascript (jsfiddle.net в этом случае), и вы не можете изменить этот заголовок. Затем сервер, fabricjs.com, видит заголовок и отклоняет запрос.

Обходным путем было бы проксирование запроса изображения через сервер. Или для ударов, вы можете попробовать открыть, http://fabricjs.com/article_assets/9.png, в отдельной вкладке браузера, чтобы вставить в HTTP-кеш браузера, а затем снова запустить скрипту, из-за чего изображение загружается из кеша. Это сработало для меня, и я увидел маленькую собачку-мопс на холсте, но это не законное решение.