Fabric.js - loadFromJSON无法渲染图像

时间:2018-02-14 02:58:45

标签: javascript fabricjs

任何人都可以告诉我为什么以下代码不加载图像?文件名已经过调整,以保护无辜者。我使用Fabricjs 2.0.0-rc.3

这是我的代码:

var obj = {"objects":[{"type":"image","version":"2.0.0-rc.3","originX":"left","originY":"top","left":"0","top":"0","width":"4595.74","height":"1080","fill":"rgb(0,0,0)","stroke":"","strokeWidth":"0","strokeDashArray":"","strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":"10","scaleX":"1","scaleY":"1","angle":"0","flipX":"false","flipY":"false","opacity":"1","shadow":"","visible":"true","clipTo":"","backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":"","skewX":"0","skewY":"0","crossOrigin":"","cropX":"0","cropY":"0","src":"file.png","filters":[{"type":"Technicolor"}]},{"type":"image","version":"2.0.0-rc.3","originX":"left","originY":"top","left":"0","top":"0","width":"1920","height":"2150.06","fill":"rgb(0,0,0)","stroke":"","strokeWidth":"0","strokeDashArray":"","strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":"10","scaleX":"1","scaleY":"1","angle":"0","flipX":"false","flipY":"false","opacity":"1","shadow":"","visible":"true","clipTo":"","backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":"","skewX":"0","skewY":"0","crossOrigin":"","cropX":"0","cropY":"0","src":"file.png","filters":[{"type":"Saturation","saturation":"0.544874"},{"type":"Gamma","gamma":["1.603718","1.435115","1.462562"]}]},{"type":"image","version":"2.0.0-rc.3","originX":"left","originY":"top","left":"0","top":"0","width":"800","height":"199","fill":"rgb(0,0,0)","stroke":"","strokeWidth":"0","strokeDashArray":"","strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":"10","scaleX":"1","scaleY":"1","angle":"0","flipX":"false","flipY":"false","opacity":"1","shadow":"","visible":"true","clipTo":"","backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":"","skewX":"0","skewY":"0","crossOrigin":"","cropX":"0","cropY":"0","src":"file.png"},{"type":"i-text","version":"2.0.0-rc.3","originX":"left","originY":"top","left":"0","top":"0","width":"56.7","height":"16.95","fill":"rgb(0,0,0)","stroke":"","strokeWidth":"1","strokeDashArray":"","strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":"10","scaleX":"1","scaleY":"1","angle":"0","flipX":"false","flipY":"false","opacity":"1","shadow":"","visible":"true","clipTo":"","backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":"","skewX":"0","skewY":"0","text":"asdfasdf","fontSize":"15","fontWeight":"normal","fontFamily":"Arial","fontStyle":"normal","lineHeight":"1.16","underline":"false","overline":"false","linethrough":"false","textAlign":"right","textBackgroundColor":"","charSpacing":"0"}],"backgroundImage":{"type":"image","version":"2.0.0-rc.3","originX":"left","originY":"top","left":"0","top":"0","width":"2250","height":"1500","fill":"rgb(0,0,0)","stroke":"","strokeWidth":"0","strokeDashArray":"","strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":"10","scaleX":"1","scaleY":"1","angle":"0","flipX":"false","flipY":"false","opacity":"1","shadow":"","visible":"true","clipTo":"","backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":"","skewX":"0","skewY":"0","crossOrigin":"","cropX":"0","cropY":"0","src":"file.png"}};

var canvas = new fabric.Canvas('workspace',{
    renderOnAddRemove : true,
    enableRetinaScaling : false,
    preserveObjectStacking: true,
    stopContextMenu : true,
    width : 1920,
    height : 1080
});

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

0 个答案:

没有答案