fabricjs の canvas.loadFromDatalessJSON(savedDataDLJSON) に問題があります。単純な長方形のキャンバスがある場合はすべて問題ありませんが、img(単純な画像)を追加すると、キャンバスをロードしたくありません(長方形と画像)、エラーはありません。だから私はjsonを表示し、それは正常だと思います.srcを「my_link_to_image」に変更しましたが、画像のsrcは正しいです。
{"objects":[{"type":"rect","originX":"center","originY":"center","left":100,"top":100,"width":100,"height":100,"fill":"red","overlayFill":null,"stroke":null,"strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":true,"transparentCorners":true,"perPixelTargetFind":false,"shadow":null,"visible":true,"clipTo":null,"rx":0,"ry":0,"x":0,"y":0},{"type":"image","originX":"center","originY":"center","left":314,"top":101,"width":70,"height":70,"fill":"rgb(0,0,0)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":true,"transparentCorners":true,"perPixelTargetFind":false,"shadow":null,"visible":true,"clipTo":null,"src":"http://my_link_to_image","filters":[]}],"background":"cyan"}
クリックイベントの保存と読み込み
$("#save").click(function() {
savedDataDLJSON = JSON.stringify(canvas.toDatalessJSON())
canvas.clear();
});
$("#load").click(function(){
console.log(savedDataDLJSON);
canvas.loadFromDatalessJSON(savedDataDLJSON);
canvas.renderAll();
});