CODEWITHSUNDEEP
fabricjs
ankurjhawar
ankurjhawar

Reputation: 315

How to add custom content in fabric.Image()

I am trying to use the following suggested way to store canvas in the server:

Fabric.js - how to save canvas on server with custom attributes

But in my case, I am loading an image from a url like:

fabric.Image.fromURL(url, function(image) {
  image.alt = product.skuId;
  image.productClass = product.productClass;
  canvas.add(image);
}, {
  crossOrigin: "Annoymous"
});

But when I try to store the same in the db the newer attributes are not stored.

Is there a way to store custom attribute (or even "alt") in the DB?

Edit:

Created a fiddle with what I tried: https://jsfiddle.net/anjhawar/dpyb7cf7/

When we press save the canvas is dumped in the local storage, but when we check the "objects" array we do not get the custom attributes i.e. "id" and "alt", as per the example.

Am I missing something?

Upvotes: 4

Views: 16915

Answers (1)

Mullainathan
Mullainathan

Reputation: 456

Here my solution to store custom attribute (id).

fabric.Image.fromURL(link, function(img) {
    img.set({
        id : 'image_'+index,
        width : canvas.width / 2,
        height : canvas.height / 2
    });
    canvas.add(img).renderAll().setActiveObject(img);
});

For quick review here is a working code : http://jsfiddle.net/mullainathan/dpyb7cf7/1

Upvotes: 6

Related Questions