I am working on a canvas project that involves multiple image objects, each with custom attributes. My goal is to save this canvas as a json object in a database, but the conversion process seems to strip away the custom attributes. Currently, I am using the following code to convert the canvas into json:
canvasJson = JSON.stringify(canvas);
Unfortunately, the resulting canvasJson only retains default attributes like width, height, and opacity, missing out on the custom attributes and their values. How can I ensure that the converted json includes all attributes? Any suggestions on the right approach to resolve this issue would be greatly appreciated.
Edit
Below is the code snippet used for creating image objects within the canvas:
var imgObj = new Image();
var imgSrc = $IMAGE_URL;
imgObj.src = imgSrc;
var image = new fabric.Image(imgObj);
image.set({
left: 0,
top: 0,
angle: 0,
padding: 0,
cornersize: 0,
lockMovementX: true,
lockMovementY: true,
lockRotation: true,
elementId: $elementID,
elementname: $elementName,
elementstatus: $elementStatus,
width: componentImageWidth,
height: componentImageHeight
});
canvas.add(image);
image.setCoords();
canvas.renderAll();
canvas.selection = false;
canvas.renderAll();
setObjectAction(image, false);
Despite setting custom attributes such as elementId, elementname, and elementstatus during image creation, these attributes are missing from the canvas json generated through JSON.stringify(canvas);. Is there a way to retain these custom attributes in the json data?