Develop Reference

How to identify the objects color on fabricjs

I have a canvas (with fabricjs working on) where I put rectangles of different colors but with the 50% opacity of the fill color by default.
At the end, I want to set the opacity of every rectangle selected to 100% with the respective color. I'm having difficulties identifying the color of every rectangle, so I can pass from "rgba(255,0,0,0.5)" to "rgba(255,0,0,1)", and from "rgba(0,255,0,0.5)" to "rgba(0,255,0,1)" (for example).
This is the code right now:
function fillColor() {
var objs = canvas.getActiveObjects();
if (!objs) return;
objs.forEach(function (obj) {
if (obj instanceof fabric.Path) {
obj.setStroke('rgba(242,0,222,1)');
} else {
obj.set("fill", 'rgba(242,0,222,1)');
}
canvas.renderAll();
});
}
This only converts every selected object to a 'rgba(242,0,222,1)'.
And I wanted to be like:
function fillColorOb() {
var objs = canvas.getActiveObjects();
if (!objs) return;
objs.forEach(function (obj) {
if (obj instanceof fabric.Path) {
obj.setStroke('rgba(242,0,222,1)');
} else {
//if (obj.color == 'rgba(242,0,222,0.5)') {
//obj.set("fill", 'rgba(242,0,222,1)');
//}
//if (obj.color == 'rgba(242,0,0,0.5)') {
//obj.set("fill", 'rgba(242,0,0,1)');
//}
}
canvas.renderAll();
});
}
So that way, with the if I can identify first the rectangle color and then set the rgba as I want.
Thanks:)

I didn't come up with the exact idea, but here is a solution:
I have struggle trying to extract information from an object selected, but there is a thing you can do. You can export all the canvas into a JSON file:
JSON.stringify(canvas);
And then interpret that JSON file
{
"version": "5.2.4",
"objects": [{
"type": "rect",
"version": "5.2.4",
"originX": "left",
"originY": "top",
"left": 318,
"top": 13,
"width": 100,
"height": 100,
"fill": "rgba(242,0,222,0.5)",
"stroke": "rgba(242,0,222,1)",
"strokeWidth": 2,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeDashOffset": 0,
"strokeLineJoin": "miter",
"strokeUniform": false,
"strokeMiterLimit": 4,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"backgroundColor": "",
"fillRule": "nonzero",
"paintFirst": "fill",
"globalCompositeOperation": "source-over",
"skewX": 0,
"skewY": 0,
"rx": 10,
"ry": 10,
"name": "ly1"
}, {
"type": "circle",
"version": "5.2.4",
"originX": "left",
"originY": "top",
"left": 114,
"top": 119,
"width": 253.49,
"height": 253.49,
"fill": "rgba(0,255,132,0.5)",
"stroke": "rgba(0,255,132,1)",
"strokeWidth": 2,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeDashOffset": 0,
"strokeLineJoin": "miter",
"strokeUniform": false,
"strokeMiterLimit": 4,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"backgroundColor": "",
"fillRule": "nonzero",
"paintFirst": "fill",
"globalCompositeOperation": "source-over",
"skewX": 0,
"skewY": 0,
"radius": 126.74605507255723,
"startAngle": 0,
"endAngle": 360,
"name": "ly4"
}]
}
And then all the information you'll need you can find it on that file.
That's not what I was exactly expecting but it works, and I had to export it anyways so :)
Hope it helped anyone!

access specific object value and change it using lodash

[
{
"type": "image",
"version": "3.6.6",
"originX": "left",
"originY": "top",
"left": 93.41,
"top": 156,
"width": 100,
"height": 100,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 0,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeDashOffset": 0,
"strokeLineJoin": "miter",
"strokeMiterLimit": 4,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "transparent",
"fillRule": "nonzero",
"paintFirst": "fill",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"crossOrigin": "",
"cropX": 0,
"cropY": 0,
"src": "",
"filters": []
},
{
"type": "textbox",
"version": "3.6.6",
"originX": "left",
"originY": "top",
"left": 127.91,
"top": 188.41,
"width": 30,
"height": 34.17,
"fill": "rgba(0, 0, 0, 1)",
"stroke": "rgba(255, 255, 255, 0)",
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeDashOffset": 0,
"strokeLineJoin": "miter",
"strokeMiterLimit": 4,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"paintFirst": "fill",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"text": "new text",
"fontSize": 14,
"fontWeight": "normal",
"fontFamily": "Times New Roman",
"fontStyle": "normal",
"lineHeight": 1.16,
"underline": false,
"overline": false,
"linethrough": false,
"textAlign": "left",
"textBackgroundColor": "",
"charSpacing": 0,
"minWidth": 20,
"splitByGrapheme": false,
"styles": {}
}
]
I have the following object as klass for lodash I want to access width for every object and change it to the specific value I have tried._map but it didn't work. i also tried to use the map function of javascript (Array.protype.map) but it didn;t work any idea on how can i override the object value in lodash and save it. ?

what exacly would you like to change? which property?
you can use map method and iterate thought each array item and change there any property
const newUpdatedArray = array.map(i => ({...i, type: 'new type', version: Math.random()}))
in my example I changed type and version in each object
const array = [
{
"type": "image",
"version": "3.6.6",
"originX": "left",
"originY": "top",
"left": 93.41,
"top": 156,
"width": 100,
"height": 100,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 0,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeDashOffset": 0,
"strokeLineJoin": "miter",
"strokeMiterLimit": 4,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "transparent",
"fillRule": "nonzero",
"paintFirst": "fill",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"crossOrigin": "",
"cropX": 0,
"cropY": 0,
"src": "",
"filters": []
},
{
"type": "textbox",
"version": "3.6.6",
"originX": "left",
"originY": "top",
"left": 127.91,
"top": 188.41,
"width": 30,
"height": 34.17,
"fill": "rgba(0, 0, 0, 1)",
"stroke": "rgba(255, 255, 255, 0)",
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeDashOffset": 0,
"strokeLineJoin": "miter",
"strokeMiterLimit": 4,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"paintFirst": "fill",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"text": "new text",
"fontSize": 14,
"fontWeight": "normal",
"fontFamily": "Times New Roman",
"fontStyle": "normal",
"lineHeight": 1.16,
"underline": false,
"overline": false,
"linethrough": false,
"textAlign": "left",
"textBackgroundColor": "",
"charSpacing": 0,
"minWidth": 20,
"splitByGrapheme": false,
"styles": {}
}]
const newUpdatedArray = array.map(i => ({...i, type: 'new type', version: Math.random()}))
console.log(newUpdatedArray)

Apply filters to an image, loaded from json

I need some help.
I have a String JSON, that contains the structure of an image object of FabricJS, than contains filters.
I want to apply these filters, when I load the image in the canvas.
How i can do this?
"1":
{
"type": "image",
"originX": "left",
"originY": "top",
"lockMovementX": false,
"lockMovementY": false,
"lockScalingX": false,
"lockScalingY": false,
"lockRotation": false,
"lockUniScaling": false,
"lockScalingFlip": false,
"left": 193.13,
"top": 70.87,
"width": 718,
"height": 647,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 0.17,
"scaleY": 0.17,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"src": "cuadradito.png",
"filters": [
{
"type": "Invert"
}
],
"crossOrigin": "",
"alignX": "none",
"alignY": "none",
"meetOrSlice": "meet"
}
The code of the top, is the object of the image.
This code is loaded from a BD, with a ajax request.

remove specific element from json

i have json like
{
"type": "textbox",
"originX": "center",
"originY": "top",
"left": 1289.6,
"top": 695.43,
"width": 244.84,
"height": 36.72,
"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",
"transformMatrix": null,
"lockMovementX": false,
"lockMovementY": false,
"evented": true,
"text": "FROM ONLY £199",
"fontSize": 25,
"fontWeight": "",
"fontFamily": "'trebuchet ms'",
"fontStyle": "",
"lineHeight": 1.3,
"textDecoration": "",
"textAlign": "left",
"textBackgroundColor": "",
"styles": {
"0": {
"1": {
"fontFamily": "'trebuchet ms'",
"fontSize": 25,
"fontWeight": "",
"fontStyle": ""
},
"2": {
"fontFamily": "'trebuchet ms'",
"fontSize": 25,
"fontWeight": "",
"fontStyle": ""
}
}
},
"minWidth": 20
}
You can see there is styles attribute at second last, it has many other objects. when you open ony one from that you will see fontFamily, fontSize fontWeight. I want to remove fontWeight from it. For this i tried this code
if (typeof indexs['styles'] != "undefined") {
for (rowIndex in indexs['styles']) {
for (letterIndex in indexs['styles'][rowIndex]) {
if (indexs['styles'][rowIndex][letterIndex].fontWeight && indexs['styles'][rowIndex][letterIndex].fontWeight=='') {
delete indexs['styles'][rowIndex][letterIndex]['fontWeight'];
}
}
}
}
But not deleting that attribute. Am i doing anything wrong there?

You have to update this:
if (indexs['styles'][rowIndex][letterIndex].fontWeight=='') {
delete indexs['styles'][rowIndex][letterIndex]['fontWeight'];
}
because a blank value "" is a falsy value and
indexs['styles'][rowIndex][letterIndex].fontWeight
results as false and && should work when both are true.

try this too...to check whether the key "fontWeight" is there before checking for null value...
if (typeof indexs['styles'] != "undefined") {
for (rowIndex in indexs['styles']) {
for (letterIndex in indexs['styles'][rowIndex]) {
if (indexs['styles'][rowIndex][letterIndex].hasOwnProperty("fontWeight") && indexs['styles'][rowIndex][letterIndex].fontWeight=='') {
delete indexs['styles'][rowIndex][letterIndex]['fontWeight'];
}
}
}
}
});

fabric.js loading json with inserted image is breaking the canvas

Whenever I add an image to the canvas on fabric.js then I save and stringify it to JSON in a hidden field the loaded canvas from the JSON data has 0 objects on the console.log and the JSON data in the hidden field / variable is incomplete. The image is inserted and is the only object from the JSON I can edit if I load the JSON data that has been stringified. My program works saving to JSON with adding text, shapes, etc but when I add an image this is what happens.
Here is the code I am using to add the 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 = $( this ).attr('src');
insertImage(imageGraphic);
});
Here is the code that runs after that, when it converts it to JSON data in a 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 is what the JSON data looks like before the image is 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 is what happens to it after the image is inserted. This JSON data does not load properly and displays the canvas with 0 objects on the 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 do you load your json data back?
Try:
canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));
This worked for me.
You need the callback function when you load Images.
My (boiled down) solution looks like
// activepage contains the currently used canvas
this.clickOpenHandler = function(event) {
var file = event.target.files[0];
// file holds now an [file Object]
if (file) {
var reader = new FileReader();
reader.onload = function(e_onload) {
var content = e_onload.target.result;
// content holds now an [object File], like {"objects":[{"type":"rect","originX":"left", ...
activepage.canvas.loadFromJSON(content, function () {
activepage.canvas.renderAll.bind(activepage.canvas);
// Here the canvas already holds the read objects.
console.log(activepage.canvas.getObjects().length); // gives 2 in my testcase
activepage.canvas.renderAll();
$("#pty_open").val(null); // reset input element
});
}
reader.readAsText(file);
}
};
With this HTML input element you can select a local JSON file, which triggers the onchange event:
<input id="pty_open" type="file" />
I hope this example helps you.
PS: Watch out with the onchange event. It triggers only, when the filename is different to the last one. When you select the same file a second time, the onchange does not trigger and nothing happens. I prevented this with the $("#pty_open").val(null); statement.

so something in this json data is breaking it when it is added to the canvas then saved this is the extra json data that is added. Not sure what in there could be causing it.
{
"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": true,
"hasControls": true,
"hasBorders": true,
"src": "images/stock/8ball.jpg",
"filters": [],
"crossOrigin": "",
"alignX": "none",
"alignY": "none",
"meetOrSlice": "meet"
}

Sorry for the late answer, I just returned from vacation. And I would have prefered to add a comment, not an answer, but I have too few reputation points.
Back to topic:
The only thing I can imagine is, that the picture does not exist at the given source location ("src": "images/stock/8ball.jpg").