javascript - fabric.js loading json with inserted image is breaking the canvas -
whenever add image canvas on fabric.js save , stringify json in hidden field loaded canvas json data has 0 objects on console.log , json data in hidden field / variable incomplete. image inserted , object json can edit if load json data has been stringified. program works saving json adding text, shapes, etc when add image happens.
here code using add image.
function insertimage(src){ fabric.image.fromurl(src, function(image) { var scale = 200 / image.width; image.set({ left: 40, top: 40, scalex: scale, scaley: scale }); canvas.centerobject(image); canvas.add(image); canvas.renderall(); }); } $( ".image-graphic" ).click(function(){ var imagegraphic = $( ).attr('src'); insertimage(imagegraphic); }); here code runs after that, when converts json data in hidden field.
$( "#testimage" ).click(function(){ var $additionalpropertiesdata = canvas.tojson(['selectable','lockmovementx', 'lockmovementy', 'hascontrols', 'hasborders', 'id']); $( ".frontdata" ).val(json.stringify($additionalpropertiesdata)); var $frontpreviewdata = $( ".frontdata" ).val(); }); this json data looks before image inserted
{ "objects": [ { "type": "i-text", "originx": "center", "originy": "top", "left": 544.68, "top": 144.16, "width": 307.75, "height": 65.54, "fill": "#000", "stroke": null, "strokewidth": 1, "strokedasharray": null, "strokelinecap": "butt", "strokelinejoin": "miter", "strokemiterlimit": 10, "scalex": 1.36, "scaley": 1.36, "angle": 0, "flipx": false, "flipy": false, "opacity": 1, "shadow": null, "visible": true, "clipto": null, "backgroundcolor": "", "fillrule": "nonzero", "globalcompositeoperation": "source-over", "selectable": true, "hascontrols": true, "hasborders": true, "id": "fullname", "text": "your name", "fontsize": "50", "fontweight": "bold", "fontfamily": "pt serif", "fontstyle": "", "lineheight": 1.16, "textdecoration": "", "textalign": "center", "textbackgroundcolor": "", "styles": {} }, { "type": "i-text", "originx": "center", "originy": "top", "left": 544.68, "top": 228.48, "width": 135.85, "height": 28.84, "fill": "#000", "stroke": null, "strokewidth": 1, "strokedasharray": null, "strokelinecap": "butt", "strokelinejoin": "miter", "strokemiterlimit": 10, "scalex": 1.36, "scaley": 1.36, "angle": 0, "flipx": false, "flipy": false, "opacity": 1, "shadow": null, "visible": true, "clipto": null, "backgroundcolor": "", "fillrule": "nonzero", "globalcompositeoperation": "source-over", "selectable": true, "hascontrols": true, "hasborders": true, "id": "jobtitle", "text": "your job title", "fontsize": 22, "fontweight": "normal", "fontfamily": "pt serif", "fontstyle": "", "lineheight": 1.16, "textdecoration": "", "textalign": "center", "textbackgroundcolor": "", "styles": {} }, { "type": "i-text", "originx": "left", "originy": "top", "left": 45.02, "top": 472.44, "width": 109.35, "height": 20.97, "fill": "#000", "stroke": null, "strokewidth": 1, "strokedasharray": null, "strokelinecap": "butt", "strokelinejoin": "miter", "strokemiterlimit": 10, "scalex": 1.36, "scaley": 1.36, "angle": 0, "flipx": false, "flipy": false, "opacity": 1, "shadow": null, "visible": true, "clipto": null, "backgroundcolor": "", "fillrule": "nonzero", "globalcompositeoperation": "source-over", "selectable": true, "hascontrols": true, "hasborders": true, "id": "phonenumber", "text": "o:888.888.8888", "fontsize": "16", "fontweight": "normal", "fontfamily": "pt serif", "fontstyle": "italic", "lineheight": 1.16, "textdecoration": "", "textalign": "left", "textbackgroundcolor": "", "styles": {} }, { "type": "i-text", "originx": "center", "originy": "top", "left": 544.68, "top": 384.88, "width": 237.27, "height": 28.84, "fill": "#000", "stroke": null, "strokewidth": 1, "strokedasharray": null, "strokelinecap": "butt", "strokelinejoin": "miter", "strokemiterlimit": 10, "scalex": 1.36, "scaley": 1.36, "angle": 0, "flipx": false, "flipy": false, "opacity": 1, "shadow": null, "visible": true, "clipto": null, "backgroundcolor": "", "fillrule": "nonzero", "globalcompositeoperation": "source-over", "selectable": true, "hascontrols": true, "hasborders": true, "id": "companyname", "text": "company name here", "fontsize": 22, "fontweight": "normal", "fontfamily": "pt serif", "fontstyle": "", "lineheight": 1.16, "textdecoration": "", "textalign": "center", "textbackgroundcolor": "", "styles": {} }, { "type": "i-text", "originx": "left", "originy": "top", "left": 461.61, "top": 436.56, "width": 122.17, "height": 18.35, "fill": "#000", "stroke": null, "strokewidth": 1, "strokedasharray": null, "strokelinecap": "butt", "strokelinejoin": "miter", "strokemiterlimit": 10, "scalex": 1.36, "scaley": 1.36, "angle": 0, "flipx": false, "flipy": false, "opacity": 1, "shadow": null, "visible": true, "clipto": null, "backgroundcolor": "", "fillrule": "nonzero", "globalcompositeoperation": "source-over", "selectable": true, "hascontrols": true, "hasborders": true, "id": "addresslineone", "text": "company address 1", "fontsize": "14", "fontweight": "normal", "fontfamily": "open sans", "fontstyle": "italic", "lineheight": 1.16, "textdecoration": "", "textalign": "left", "textbackgroundcolor": "", "styles": {} }, { "type": "i-text", "originx": "center", "originy": "top", "left": 544.68, "top": 474.64, "width": 87.47, "height": 18.35, "fill": "#000", "stroke": null, "strokewidth": 1, "strokedasharray": null, "strokelinecap": "butt", "strokelinejoin": "miter", "strokemiterlimit": 10, "scalex": 1.36, "scaley": 1.36, "angle": 0, "flipx": false, "flipy": false, "opacity": 1, "shadow": null, "visible": true, "clipto": null, "backgroundcolor": "", "fillrule": "nonzero", "globalcompositeoperation": "source-over", "selectable": true, "hascontrols": true, "hasborders": true, "id": "addresslinetwo", "text": "address line 2", "fontsize": "14", "fontweight": "normal", "fontfamily": "pt serif", "fontstyle": "italic", "lineheight": 1.16, "textdecoration": "", "textalign": "center", "textbackgroundcolor": "", "styles": {} }, { "type": "i-text", "originx": "left", "originy": "top", "left": 47.08, "top": 433.17, "width": 107.83, "height": 20.97, "fill": "#000", "stroke": null, "strokewidth": 1, "strokedasharray": null, "strokelinecap": "butt", "strokelinejoin": "miter", "strokemiterlimit": 10, "scalex": 1.36, "scaley": 1.36, "angle": 0, "flipx": false, "flipy": false, "opacity": 1, "shadow": null, "visible": true, "clipto": null, "backgroundcolor": "", "fillrule": "nonzero", "globalcompositeoperation": "source-over", "selectable": true, "hascontrols": true, "hasborders": true, "id": "cellnumber", "text": "c:888.888.8888", "fontsize": "16", "fontweight": "normal", "fontfamily": "pt serif", "fontstyle": "italic", "lineheight": 1.16, "textdecoration": "", "textalign": "left", "textbackgroundcolor": "", "styles": {} }, { "type": "i-text", "originx": "right", "originy": "top", "left": 1044.34, "top": 433, "width": 153.52, "height": 20.97, "fill": "#000", "stroke": null, "strokewidth": 1, "strokedasharray": null, "strokelinecap": "butt", "strokelinejoin": "miter", "strokemiterlimit": 10, "scalex": 1.36, "scaley": 1.36, "angle": 0, "flipx": false, "flipy": false, "opacity": 1, "shadow": null, "visible": true, "clipto": null, "backgroundcolor": "", "fillrule": "nonzero", "globalcompositeoperation": "source-over", "selectable": true, "hascontrols": true, "hasborders": true, "id": "emailaddress", "text": "youremail@email.com", "fontsize": "16", "fontweight": "normal", "fontfamily": "pt serif", "fontstyle": "italic", "lineheight": 1.16, "textdecoration": "", "textalign": "right", "textbackgroundcolor": "", "styles": {} }, { "type": "i-text", "originx": "right", "originy": "top", "left": 1042.98, "top": 472.44, "width": 172.43, "height": 20.97, "fill": "#000", "stroke": null, "strokewidth": 1, "strokedasharray": null, "strokelinecap": "butt", "strokelinejoin": "miter", "strokemiterlimit": 10, "scalex": 1.36, "scaley": 1.36, "angle": 0, "flipx": false, "flipy": false, "opacity": 1, "shadow": null, "visible": true, "clipto": null, "backgroundcolor": "", "fillrule": "nonzero", "globalcompositeoperation": "source-over", "selectable": true, "hascontrols": true, "hasborders": true, "id": "webaddress", "text": "www.websiteaddress.com", "fontsize": "16", "fontweight": "normal", "fontfamily": "pt serif", "fontstyle": "italic", "lineheight": 1.16, "textdecoration": "", "textalign": "right", "textbackgroundcolor": "", "styles": {} } ], "background": "", "backgroundimage": { "type": "image", "originx": "left", "originy": "top", "left": 0, "top": 0, "width": 1088, "height": 638, "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": "/images/sample.jpg", "filters": [], "crossorigin": "", "alignx": "none", "aligny": "none", "meetorslice": "meet" } } this happens after image inserted. json data not load , displays canvas 0 objects on console.log.
{ "objects": [ { "type": "i-text", "originx": "center", "originy": "top", "left": 544.68, "top": 144.16, "width": 307.75, "height": 65.54, "fill": "#000", "stroke": null, "strokewidth": 1, "strokedasharray": null, "strokelinecap": "butt", "strokelinejoin": "miter", "strokemiterlimit": 10, "scalex": 1.36, "scaley": 1.36, "angle": 0, "flipx": false, "flipy": false, "opacity": 1, "shadow": null, "visible": true, "clipto": null, "backgroundcolor": "", "fillrule": "nonzero", "globalcompositeoperation": "source-over", "selectable": true, "hascontrols": true, "hasborders": true, "id": "fullname", "text": "your name", "fontsize": "50", "fontweight": "bold", "fontfamily": "pt serif", "fontstyle": "", "lineheight": 1.16, "textdecoration": "", "textalign": "center", "textbackgroundcolor": "", "styles": {} }, { "type": "i-text", "originx": "center", "originy": "top", "left": 544.68, "top": 228.48, "width": 135.85, "height": 28.84, "fill": "#000", "stroke": null, "strokewidth": 1, "strokedasharray": null, "strokelinecap": "butt", "strokelinejoin": "miter", "strokemiterlimit": 10, "scalex": 1.36, "scaley": 1.36, "angle": 0, "flipx": false, "flipy": false, "opacity": 1, "shadow": null, "visible": true, "clipto": null, "backgroundcolor": "", "fillrule": "nonzero", "globalcompositeoperation": "source-over", "selectable": true, "hascontrols": true, "hasborders": true, "id": "jobtitle", "text": "your job title", "fontsize": 22, "fontweight": "normal", "fontfamily": "pt serif", "fontstyle": "", "lineheight": 1.16, "textdecoration": "", "textalign": "center", "textbackgroundcolor": "", "styles": {} }, { "type": "i-text", "originx": "left", "originy": "top", "left": 45.02, "top": 472.44, "width": 109.35, "height": 20.97, "fill": "#000", "stroke": null, "strokewidth": 1, "strokedasharray": null, "strokelinecap": "butt", "strokelinejoin": "miter", "strokemiterlimit": 10, "scalex": 1.36, "scaley": 1.36, "angle": 0, "flipx": false, "flipy": false, "opacity": 1, "shadow": null, "visible": true, "clipto": null, "backgroundcolor": "", "fillrule": "nonzero", "globalcompositeoperation": "source-over", "selectable": true, "hascontrols": true, "hasborders": true, "id": "phonenumber", "text": "o:888.888.8888", "fontsize": "16", "fontweight": "normal", "fontfamily": "pt serif", "fontstyle": "italic", "lineheight": 1.16, "textdecoration": "", "textalign": "left", "textbackgroundcolor": "", "styles": {} }, { "type": "i-text", "originx": "center", "originy": "top", "left": 544.68, "top": 384.88, "width": 237.27, "height": 28.84, "fill": "#000", "stroke": null, "strokewidth": 1, "strokedasharray": null, "strokelinecap": "butt", "strokelinejoin": "miter", "strokemiterlimit": 10, "scalex": 1.36, "scaley": 1.36, "angle": 0, "flipx": false, "flipy": false, "opacity": 1, "shadow": null, "visible": true, "clipto": null, "backgroundcolor": "", "fillrule": "nonzero", "globalcompositeoperation": "source-over", "selectable": true, "hascontrols": true, "hasborders": true, "id": "companyname", "text": "company name here", "fontsize": 22, "fontweight": "normal", "fontfamily": "pt serif", "fontstyle": "", "lineheight": 1.16, "textdecoration": "", "textalign": "center", "textbackgroundcolor": "", "styles": {} }, { "type": "i-text", "originx": "left", "originy": "top", "left": 461.61, "top": 436.56, "width": 122.17, "height": 18.35, "fill": "#000", "stroke": null, "strokewidth": 1, "strokedasharray": null, "strokelinecap": "butt", "strokelinejoin": "miter", "strokemiterlimit": 10, "scalex": 1.36, "scaley": 1.36, "angle": 0, "flipx": false, "flipy": false, "opacity": 1, "shadow": null, "visible": true, "clipto": null, "backgroundcolor": "", "fillrule": "nonzero", "globalcompositeoperation": "source-over", "selectable": true, "hascontrols": true, "hasborders": true, "id": "addresslineone", "text": "company address 1", "fontsize": "14", "fontweight": "normal", "fontfamily": "open sans", "fontstyle": "italic", "lineheight": 1.16, "textdecoration": "", "textalign": "left", "textbackgroundcolor": "", "styles": {} }, { "type": "i-text", "originx": "center", "originy": "top", "left": 544.68, "top": 474.64, "width": 87.47, "height": 18.35, "fill": "#000", "stroke": null, "strokewidth": 1, "strokedasharray": null, "strokelinecap": "butt", "strokelinejoin": "miter", "strokemiterlimit": 10, "scalex": 1.36, "scaley": 1.36, "angle": 0, "flipx": false, "flipy": false, "opacity": 1, "shadow": null, "visible": true, "clipto": null, "backgroundcolor": "", "fillrule": "nonzero", "globalcompositeoperation": "source-over", "selectable": true, "hascontrols": true, "hasborders": true, "id": "addresslinetwo", "text": "address line 2", "fontsize": "14", "fontweight": "normal", "fontfamily": "pt serif", "fontstyle": "italic", "lineheight": 1.16, "textdecoration": "", "textalign": "center", "textbackgroundcolor": "", "styles": {} }, { "type": "i-text", "originx": "left", "originy": "top", "left": 47.08, "top": 433.17, "width": 107.83, "height": 20.97, "fill": "#000", "stroke": null, "strokewidth": 1, "strokedasharray": null, "strokelinecap": "butt", "strokelinejoin": "miter", "strokemiterlimit": 10, "scalex": 1.36, "scaley": 1.36, "angle": 0, "flipx": false, "flipy": false, "opacity": 1, "shadow": null, "visible": true, "clipto": null, "backgroundcolor": "", "fillrule": "nonzero", "globalcompositeoperation": "source-over", "selectable": true, "hascontrols": true, "hasborders": true, "id": "cellnumber", "text": "c:888.888.8888", "fontsize": "16", "fontweight": "normal", "fontfamily": "pt serif", "fontstyle": "italic", "lineheight": 1.16, "textdecoration": "", "textalign": "left", "textbackgroundcolor": "", "styles": {} }, { "type": "i-text", "originx": "right", "originy": "top", "left": 1044.34, "top": 433, "width": 153.52, "height": 20.97, "fill": "#000", "stroke": null, "strokewidth": 1, "strokedasharray": null, "strokelinecap": "butt", "strokelinejoin": "miter", "strokemiterlimit": 10, "scalex": 1.36, "scaley": 1.36, "angle": 0, "flipx": false, "flipy": false, "opacity": 1, "shadow": null, "visible": true, "clipto": null, "backgroundcolor": "", "fillrule": "nonzero", "globalcompositeoperation": "source-over", "selectable": true, "hascontrols": true, "hasborders": true, "id": "emailaddress", "text": "youremail@email.com", "fontsize": "16", "fontweight": "normal", "fontfamily": "pt serif", "fontstyle": "italic", "lineheight": 1.16, "textdecoration": "", "textalign": "right", "textbackgroundcolor": "", "styles": {} }, { "type": "i-text", "originx": "right", "originy": "top", "left": 1042.98, "top": 472.44, "width": 172.43, "height": 20.97, "fill": "#000", "stroke": null, "strokewidth": 1, "strokedasharray": null, "strokelinecap": "butt", "strokelinejoin": "miter", "strokemiterlimit": 10, "scalex": 1.36, "scaley": 1.36, "angle": 0, "flipx": false, "flipy": false, "opacity": 1, "shadow": null, "visible": true, "clipto": null, "backgroundcolor": "", "fillrule": "nonzero", "globalcompositeoperation": "source-over", "selectable": true, "hascontrols": true, "hasborders": true, "id": "webaddress", "text": "www.websiteaddress.com", "fontsize": "16", "fontweight": "normal", "fontfamily": "pt serif", "fontstyle": "italic", "lineheight": 1.16, "textdecoration": "", "textalign": "right", "textbackgroundcolor": "", "styles": {} }, { "type": "image", "originx": "left", "originy": "top", "left": 300, "top": 130.27, "width": 396, "height": 413, "fill": "rgb(0,0,0)", "stroke": null, "strokewidth": 1, "strokedasharray": null, "strokelinecap": "butt", "strokelinejoin": "miter", "strokemiterlimit": 10, "scalex": 0.51, "scaley": 0.51, "angle": 0, "flipx": false, "flipy": false, "opacity": 1, "shadow": null, "visible": true, "clipto": null, "backgroundcolor": "", "fillrule": "nonzero", "globalcompositeoperation": "source-over", "selectable": false, "hascontrols": false, "hasborders": false, "src": "/images/stock/8ball.jpg", "filters": [], "crossorigin": "", "alignx": "none", "aligny": "none", "meetorslice": "meet" } ], "background": "", "backgroundimage": { "type": "image", "originx": "left", "originy": "top", "left": 0, "top": 0, "width": 1088, "height": 638, "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": "/images/sample.jpg", "filters": [], "crossorigin": "", "alignx": "none", "aligny": "none", "meetorslice": "meet" } }
how load json data back?
try:
canvas.loadfromjson(json, canvas.renderall.bind(canvas)); this worked me.
you need callback function when load images.
my (boiled down) solution looks like
// activepage contains used canvas this.clickopenhandler = function(event) { var file = event.target.files[0]; // file holds [file object] if (file) { var reader = new filereader(); reader.onload = function(e_onload) { var content = e_onload.target.result; // content holds [object file], {"objects":[{"type":"rect","originx":"left", ... activepage.canvas.loadfromjson(content, function () { activepage.canvas.renderall.bind(activepage.canvas); // here canvas holds read objects. console.log(activepage.canvas.getobjects().length); // gives 2 in testcase activepage.canvas.renderall(); $("#pty_open").val(null); // reset input element }); } reader.readastext(file); } }; with html input element can select local json file, triggers onchange event:
<input id="pty_open" type="file" /> i hope example helps you.
ps: watch out onchange event. triggers only, when filename different last one. when select same file second time, onchange not trigger , nothing happens. prevented $("#pty_open").val(null); statement.
Comments
Post a Comment