I'm working on a project that requires me to add images of different types to a canvas, save them as JSON, and then load them again. The unique property needed for each type is simply the differentiation in type.
To achieve this, I have created a new class based on fabric.Image called fabric.Icon:
fabric.Icon = fabric.util.createClass(fabric.Image, {
type: "icon",
initialize: function (element, options) {
this.callSuper("initialize", element, options);
},
_render: function (ctx) {
this.callSuper("_render", ctx);
},
});
fabric.Icon.fromObject = function (object, callback) {
return fabric.Object._fromObject("Icon", object, callback);
};
After creating the fabric.Icon class, I use an SVG image to add a new object of this specific type to the canvas:
let newImage = new Image(); //HTML Image type, not FabricJS
newImage.onload = () => {
let icon = new fabric.Icon(newImage);
this.canvas.add(icon);
};
newImage.src = "image.svg";
However, when I try to export the canvas into JSON using
let savedJSON = canvas.toJSON()
and then load it back with
canvas.loadFromJSON(savedJSON, function () {
canvas.requestRenderAll();
}
I encounter the following error:
Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
Everything works correctly when I use the standard fabric.Image class. Should I override another method in my subclass? Or is there a better way to differentiate between various Image types?