如何通过自定义hook访问fabric对象为React中FabricJS画布添加背景图片

你遇到的TypeError: Cannot read properties of undefined (reading 'fromURL')报错核心原因是调用对象错误：fromURL是全局fabric对象下Image类的静态方法，不属于你创建的fabricCanvas画布实例属性，因此从fabricCanvas.Image访问属性自然会返回undefined。

你无需修改现有useFabric自定义hook，仅调整useFabric回调内的写法即可，修改后的完整可运行代码如下：

import { useCallback, useRef } from "react";
import { fabric } from "fabric";

const useFabric = (onChange) => {
    const fabricRef  = useRef();
    const disposeRef = useRef();
    return useCallback((node) => {
        if (node) {
             fabricRef.current = new fabric.Canvas(node);
             if (onChange) {
                  disposeRef.current = onChange(fabricRef.current);
             }
         } else if (fabricRef.current) {
              fabricRef.current.dispose();
              if (disposeRef.current) {
                   disposeRef.current();
                   disposeRef.current = undefined;
              }
         }
     }, []);
};

export default function App() {
     const ref = useFabric((fabricCanvas) => {
           // 设置基础背景色
           fabricCanvas.backgroundColor = "green";
           
           // 示例1：添加图片并置于底层
           fabric.Image.fromURL("https://i.imgur.com/8zvUjul.jpg", function ( img ) {
               // 可选：调整图片尺寸适配画布
               img.scaleToWidth(fabricCanvas.width);
               fabricCanvas.add(img);
               fabricCanvas.sendToBack(img);
               fabricCanvas.renderAll();
           });

           // 示例2：直接设置为画布背景图（可替换示例1使用）
           // fabric.Image.fromURL("https://i.imgur.com/8zvUjul.jpg", function ( img ) {
           //     fabricCanvas.setBackgroundImage(img, fabricCanvas.renderAll.bind(fabricCanvas), {
           //         scaleX: fabricCanvas.width / img.width,
           //         scaleY: fabricCanvas.height / img.height
           //     });
           // });

           // 示例3：添加矩形形状
           const rect = new fabric.Rect({
             left: 50,
             top: 50,
             fill: 'red',
             width: 80,
             height: 80,
             cornerRadius: 4
           });
           fabricCanvas.add(rect);
     });

     return (
         <div>
             <canvas ref={ref} id="canvas" width={600} height={400} />
         </div>
     );
}

所有Fabric的元素类（Image/Rect/Circle/Text等）都挂载在全局引入的fabric对象下，而非画布实例下，你后续添加其他元素都遵循new fabric.元素类(配置)的写法即可。

内容的提问来源于stack exchange，提问作者s.khan