来自 fabric.js 的 loadFromJSON 函数不加载图像答案

【问题标题】：loadFromJSON function from fabric.js does not load image来自 fabric.js 的 loadFromJSON 函数不加载图像
【发布时间】：2016-05-18 20:59:54
【问题描述】：

我正在尝试解决网站中出现的问题。看这段代码：

var retrievedJSON = workarea["modifiedOptions"];
...
canvasEl = new fabric.Canvas("canvas_" + view[i]["id"]);
                    if (!jQuery.isEmptyObject(retrievedJSON))
                    {
                        for (var work in retrievedJSON)
                        {
                            canvasEl.loadFromJSON(retrievedJSON[work], function() {
                                canvasEl.renderAll();
                                canvasEl.on("object:added", mouseDown);
                            });
                        }
                    }

有一行我想它正在尝试加载一个 json 并将它的元素放在画布中： canvasEl.loadFromJSON(retrivedJSON[work]

正在加载的json是那个：

"{"objects":[{"type":"text","originX":"left","originY":"top","left":14.08,"top":16,"width":160.84,"height":31.2,"fill":"rgb(61, 183, 228)","stroke":"rgb(0, 0, 0)","strokeWidth":0.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","text":"rascunho4","fontSize":"24","fontWeight":"normal","fontFamily":"MetalMacabre","fontStyle":"","lineHeight":1.3,"textDecoration":"","textAlign":"center","path":null,"textBackgroundColor":"","useNative":true},{"type":"image","originX":"left","originY":"top","left":14.08,"top":17,"width":200,"height":200,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.76,"scaleY":0.76,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","src":"http://mydomain.com.br/tool/media/image/1454337092.png","filters":[{"type":"Resize"}],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet"}],"background":""}"

如您所见，有一个文本和一个图像，但只有文本被加载到画布上。图像不会出现在屏幕上的画布中。为什么会这样？任何想法？你认为我的 json 可能有问题吗？

感谢任何帮助。

谢谢。

【问题讨论】：

标签： image fabricjs

【解决方案1】：

首先，您的 JSON 不正确。请删除 JSON 中的前导和尾随双引号。那么 JSON 就可以了，

你能用我的 JSON 试试这个代码吗，如下所示。

var json = '{"objects":[{"type":"path","left":104,"top":96,"width":99,"height":115,"fill": "#00274D","overlayFill":null,"stroke":null,"strokeWidth":1,"scaleX":1.04,"scaleY":1.04,"angle":-25.8,"flipX":false,"flipY ":false,"opacity":1,"selectable":true,"path":[["M",67.39,22.39],["c",2.59,-0.43,5.11,1.44,5.54,4.18], ["c",0.43,2.66,-1.3,5.26,-3.89,5.69],["c",-1.8,0.29,-3.6,-0.58,-4.61,-2.02],["L",44.5, 34.56],["l",10.87,59.62],["c",17.42,-4.46,26.06,-14.18,27.5,-29.02],["l",-10.01,-0.72],["L" ,88.7,51.91],["l",9.43,21.24],["c",-3.38,-1.95,-5.9,-5.11,-9.29,-7.06],["c",-0.29,25.06, -27.14,32.76,-33.77,47.95],["C",44.42,100.08,26.5,114.77,6.91,82.8],["L",0,92.45],["l",1.51,-21.6], ["l",19.66,4.68],["l",-9.43,3.67],["c",7.49,11.59,17.57,19.87,36.43,16.42],["L",36.22,36.57],[ "l",-18.65,2.38],["c",-0.14,2.16,-1.73,4.03,-3.89,4.39],["c",-2.59,0.43,-5.04,-1.44,-5.54, -4.1],["c",-0.43,-2.74,1.3,-5.26,3.89,-5.69],["c",1.94,-0.36,3.89,0.65,4.9,2.3],["l", 17.93,-4.82],["l",-1.37,-6.84],["c",-4.82,-0.79,-8.9 3,-4.75,-9.79,-10.08],["c",-1.15,-6.62,3.1,-12.89,9.43,-13.97],["c",6.41,-1.01,12.46,3.46,13.54, 10.08],["c",0.86,5.18,-1.58,10.15,-5.69,12.6],["l",1.87,6.12],["l",20.74,-2.88],["C",64.01 ,24.26,65.52,22.75,67.39,22.39],["L",67.39,22.39],["z"],["M",33.91,5.18],["c",-3.46,0.58,-5.76 ,3.96,-5.11,7.56],["c",0.58,3.6,3.89,6.05,7.27,5.47],["c",3.46,-0.58,5.76,-3.96,5.18,-7.56],[" C",40.61,7.05,37.37,4.61,33.91,5.18],["z"]]}],"背景":"rgba(0, 0, 0, 0)"}';

canvas.loadFromDatalessJSON(json);

【讨论】：