Utilize JSON FabricJS to incorporate image data seamlessly

Question

Utilize JSON FabricJS to incorporate image data seamlessly

Currently, I am working with the FabricJS canvas and my goal is to export the canvas as JSON.

I have experimented with loading images using both new fabric.Image and fabric.Image.fromURL, and both methods have worked well for me.

My next task is to obtain JSON data from the canvas. However, I require two different types of JSON outputs. One should include a link to the image used initially, while the other should directly embed base64 data within the JSON itself. I have attempted to use canvas.toJSON() and canvas.toDatalessJSON(), but surprisingly, they both only provide results with a link and do not contain any image data.

How can I generate JSON output that actually INCLUDES image data directly in the JSON? (I already have it with the link)

I have created a simple demo showcasing my current progress. Upon clicking on the export button and checking the console, you will notice that both objects display the source link without any base64 data included.

The reason I am interested in base64 data is because I want immediate access when reusing the JSON elsewhere.

Despite searching online and consulting the documentation, it appears that toJSON function only captures shape data and not image information. Have I overlooked something crucial?

Thank you in advance!

javascript json fabricjs

Answer 1

Answer №1

How to Extend the toObject Method of fabric.Image

Extend the toObject method of fabric.Image by adding the src property with the value of this.toDataURL().

fabric.Image.prototype.toObject = (function(toObject) {
  return function() {
    return fabric.util.object.extend(toObject.call(this), {
      src: this.toDataURL()
    });
  };
})(fabric.Image.prototype.toObject);

To set the src property, use object.toDataURL()

DEMO

const useFabricImage = () => {
  const c = document.getElementById("designer");
  const canvas = new fabric.Canvas(c, {width: 500, height: 500})
  const url = "https://i.imgur.com/KxijB.jpg";
  const img = new Image();
  img.src = url;
  const fabricImage = new fabric.Image(img, {});
  canvas.add(fabricImage);
  
  return canvas;
}
const useFromURL = () => {
  const c = document.getElementById("designer");
  const canvas = new fabric.Canvas(c, {width: 500, height: 500})
  const url = "https://i.imgur.com/KxijB.jpg";
  fabric.Image.fromURL(url, (img) => {
    canvas.add(img);
  },{
    crossOrigin:'annonymous'
  });
  return canvas;
}
fabric.Image.prototype.toDatalessObject = fabric.Image.prototype.toObject;

fabric.Image.prototype.toObject = (function(toObject) {
  return function() {
    return fabric.util.object.extend(toObject.call(this), {
      src: this.toDataURL()
    });
  };
})(fabric.Image.prototype.toObject);


const canvas = useFromURL();

const button = document.getElementById("export");
button.addEventListener("click", () => {
  console.log(canvas.toJSON());
  console.log(canvas.toDatalessJSON());
})

#designer {
  border: 1px solid aqua;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
<canvas id="designer" height="500" width="500"></canvas>
<button id="export">Export</button>

Answer 2

How to Extend the toObject Method of fabric.Image

Extend the toObject method of fabric.Image by adding the src property with the value of this.toDataURL().

fabric.Image.prototype.toObject = (function(toObject) {
  return function() {
    return fabric.util.object.extend(toObject.call(this), {
      src: this.toDataURL()
    });
  };
})(fabric.Image.prototype.toObject);

To set the src property, use object.toDataURL()

DEMO

const useFabricImage = () => {
  const c = document.getElementById("designer");
  const canvas = new fabric.Canvas(c, {width: 500, height: 500})
  const url = "https://i.imgur.com/KxijB.jpg";
  const img = new Image();
  img.src = url;
  const fabricImage = new fabric.Image(img, {});
  canvas.add(fabricImage);
  
  return canvas;
}
const useFromURL = () => {
  const c = document.getElementById("designer");
  const canvas = new fabric.Canvas(c, {width: 500, height: 500})
  const url = "https://i.imgur.com/KxijB.jpg";
  fabric.Image.fromURL(url, (img) => {
    canvas.add(img);
  },{
    crossOrigin:'annonymous'
  });
  return canvas;
}
fabric.Image.prototype.toDatalessObject = fabric.Image.prototype.toObject;

fabric.Image.prototype.toObject = (function(toObject) {
  return function() {
    return fabric.util.object.extend(toObject.call(this), {
      src: this.toDataURL()
    });
  };
})(fabric.Image.prototype.toObject);


const canvas = useFromURL();

const button = document.getElementById("export");
button.addEventListener("click", () => {
  console.log(canvas.toJSON());
  console.log(canvas.toDatalessJSON());
})

#designer {
  border: 1px solid aqua;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
<canvas id="designer" height="500" width="500"></canvas>
<button id="export">Export</button>

Answer 3

Answer №2

To enhance the functionality of fabric.Image.protype.toObject():

fabric.Image.prototype.toObject = (function (toObject) {

    return function () {
        var image = this;

        var getData = function () {
            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;

            context = canvas.getContext('2d');

            context.drawImage(image.getElement(), 0, 0);

            return canvas.toDataURL('image/png').replace(/^data:image\/png;base64,/, '');
        };

        return fabric.util.object.extend(toObject.call(this), {
            dataURL: getData(),
        });
    };
})(fabric.Image.prototype.toObject);

Subsequently, the dataURL attribute will be automatically appended to your object.

Answer 4

To enhance the functionality of fabric.Image.protype.toObject():

fabric.Image.prototype.toObject = (function (toObject) {

    return function () {
        var image = this;

        var getData = function () {
            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;

            context = canvas.getContext('2d');

            context.drawImage(image.getElement(), 0, 0);

            return canvas.toDataURL('image/png').replace(/^data:image\/png;base64,/, '');
        };

        return fabric.util.object.extend(toObject.call(this), {
            dataURL: getData(),
        });
    };
})(fabric.Image.prototype.toObject);

Subsequently, the dataURL attribute will be automatically appended to your object.

Utilize JSON FabricJS to incorporate image data seamlessly

Answer №1

Answer №2

Similar questions

I'm looking for a way to implement a jQuery-style initialization pattern using TypeScript - how can I

Tips for removing ASP.NET MVC controller name from angular route

Can I obtain a link through the branch_match_id parameter?

Does a Javascript event get triggered when the currentSrc attribute of an <img> element is modified?

Having issues with setTimeout on Chrome for Android when the browser is out of focus. Any ideas for resolving this?

Is it possible to insert JavaScript code with the <link> element?

Variation in Map Behavior in d3 Due to Datum-Data Discrepancy

Problem with AngularJS factory causing issues with promises

Angular view fails to update after form submission when using ngDialog to change the scope

Uploading multiple images with a custom meta box in Wordpress

How can I utilize Handlebars and a JSON API call to effectively transfer data from an array response and display it within a Handlebars modal?

Dramatist: What are effective methods for distinguishing and monitoring frames within a webpage?

Leverage the power of regular expressions in JavaScript for organizing and handling source files

Struggling to interpret the data received from an API request

I find the JSX syntax to be quite perplexing

Error: Attempting to access an undefined property ('useParams') which cannot be read

Convert a JSON array with a single element into a valid JavaScript object

What is the best way to apply a border-radius to the top of bars in @nivo/bar?

Transforming JSON data in a Node.js API using JSONata

saving filter configurations in JSON format using SQLite in a Node.js environment