Add image to the editor about fabricjs-react HOT 6 CLOSED

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

from fabricjs-react.

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) => { });

from fabricjs-react.

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

from fabricjs-react.

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

from fabricjs-react.

from fabricjs-react.

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;

from fabricjs-react.