使用FabricJs中的localStorage对象重绘画布

时间:2015-10-11 17:29:52

标签: javascript html5 canvas fabricjs

我的画布ID是“画布面板”我想在转到下一页时使用localStorage对象值重绘画布。我正在使用localStorage对象获取canvas对象,如下所示:

var myCanvas = JSON.parse(localStorage.getItem('canvas'));

JSON formate:

{
"objects":[

  {
     "type":"image",
     "originX":"left",
     "originY":"top",
     "left":42,
     "top":311,
     "width":100,
     "height":100,
     "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://stg.souqueen.com/media/catalog/product/cache/1/image/300x300/9df78eab33525d08d6e5fb8d27136e95/1/9/19b_1024i1.PNG",
     "filters":[

     ],
     "crossOrigin":"",
     "alignX":"none",
     "alignY":"none",
     "meetOrSlice":"meet"
  }
],
"background":""
}

我在这个帖子的帮助下得到了所有的canvas对象 Select All the objects on canvas using Fabric.js

1 个答案:

答案 0 :(得分:1)

你有你的json。所以现在在下一页上你可以使用它来导入对象:

canvas.loadFromJSON(myCanvas, canvas.renderAll.bind(canvas))