4

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?

roapp
  • 530
  • 6
  • 17
ankurjhawar
  • 315
  • 1
  • 4
  • 14

1 Answers1

6

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

roapp
  • 530
  • 6
  • 17
Mullainathan
  • 456
  • 7
  • 18
  • Were u able to store this as an object or json and reload the same using loadfromjson()? – ankurjhawar May 04 '16 at 17:38
  • Ok. I edited my question with my fiddle with you recommendation, but I am still not getting my custom attributes while I save my canvas. I would have my save function pointing to a "rest" call in my actual application. Let me know if you find some obvious miss. Thanks! – ankurjhawar May 05 '16 at 12:00
  • Hi anjhawar, Here I have mentioned fiddle with updated code. https://jsfiddle.net/mullainathan/dpyb7cf7/1/ – Mullainathan May 05 '16 at 13:10
  • Thanks for the link, can you please let know what was missing from my code. I see 2 difference: you are not using localStorage but a local object and you are using "canvas.toDatalessJSON(['id', 'alt'])". Do you think there is something that I missed to observe? Whether these changes I mentioned would make it work? – ankurjhawar May 05 '16 at 13:38
  • Sorry, I don't have any idea about your code. But, I suggest "canvas.toDatalessJSON" is the better function to save local object with custom attributes. – Mullainathan May 05 '16 at 13:44