Add image to the editor

[emorling]

I need to add the ability to add an image to the editor, and in the future other things.

For example:

fabric.Image.fromURL('my_image.png', function(oImg) { // scale image down, and flip it, before adding it onto canvas oImg.scale(0.5).set('flipX', true); canvas.add(oImg); });

Is there a way to access the fabric object? Or should we be approaching this in another way?

[asotog]

hey @emorling, do you mean the fabric canvas instance ? from this const { selectedObjects, editor, onReady } = useFabricJSEditor() then editor.canvas.add( ... )

[emorling]

I am not sure I understand how to do this.

I understand that we can add an Image object using: editor.canvas.add( ... )

But how do we for example do this prior to adding it:

fabric.Image.fromURL('my_image.png',(oImg) => { });

[asotog]

Ah alright you are almost there, from your project you have to regular install the fabric dependency because fabricjs-react needs it as peer dependency, then you can do exactly that:

import { fabric } from 'fabric'; // this also installed on your project
import { useFabricJSEditor } from 'fabricjs-react';

const { selectedObjects, editor, onReady } = useFabricJSEditor();
fabric.Image.fromURL('my_image.png', function(oImg) { 
    editor.canvas.add( ... )
})

You can use this boilerplate we created https://codesandbox.io/s/flamboyant-wind-ff3x8

[emorling]

Fabulous! You are one of the smartest people on the planet!

BTW do you have any consulting hours this weekend, to solve this: fabricjs/fabric.js#6883

[asotog]

You are welcome will add that use case  to readme thank you, well let confirm you later today not sure Sent from Yahoo Mail for iPhone On Saturday, February 20, 2021, 9:20 AM, emorling <[email protected]> wrote: Fabulous! You are one of the smartest people on the planet! BTW do you have any consulting hours this weekend, to solve this: fabricjs/fabric.js#6883 — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[azakero]

Hi. I tested the above code to render an image on the canvas, but there are multiple images being rendered. Like a million. What am I doing wrong? Here's the sandbox: https://y0rq7.csb.app/ and here's the code:

import React from "react";
import { fabric } from "fabric";
import { FabricJSCanvas, useFabricJSEditor } from "fabricjs-react";

const App = () => {
  const { selectedObjects, editor, onReady } = useFabricJSEditor();

  fabric.Image.fromURL("https://i.imgur.com/8zvUjul.jpg", function (oImg) {
    editor?.canvas.add(oImg);
  });

  return (
    <div>
      <FabricJSCanvas className="sample-canvas" onReady={onReady} />
    </div>
  );
};

export default App;