React+Fabric.js报错：canvas.setBackgroundImage不是函数求解决方案

核心问题分析 #

1. 语法错误导致Canvas实例未初始化：useEffect结尾的依赖数组写法错误（原代码写成[]);，正确应为}, []);），导致Canvas实例无法创建并赋值给canvas状态，此时canvas为null，调用其方法自然报错。
2. 未处理canvas为空的情况：React状态更新是异步的，直接在函数中使用canvas可能遇到未初始化的场景。
3. Fabric.js版本API差异：v5+版本的setBackgroundImage不再需要传递renderAll回调，需手动调用渲染方法。

修复步骤及完整代码 #

1. 修复useEffect语法错误 #

修正依赖数组的写法，确保Canvas实例能正常初始化并赋值给状态。

2. 新增canvas非空判断 #

在所有使用canvas的函数中添加非空校验，避免空指针错误。

3. 适配Fabric.js API #

针对v5+版本调整setBackgroundImage的调用方式，手动触发渲染。

以下是完整修复后的代码：

import React, { useRef, useEffect, useState } from 'react';
import { Canvas, Image as FabricImage, Textbox } from 'fabric';
import '../Styles/Canvas.css';

const CanvasComponent = () => {
  const canvRef = useRef(null);
  const [canvas, setCanvas] = useState(null);

  const canvasSize = { width: 500, height: 300 };

  useEffect(() => {
    const canvasInstance = new Canvas(canvRef.current, {
      width: canvasSize.width,
      height: canvasSize.height,
      backgroundColor: 'white',
    });
    setCanvas(canvasInstance);

    return () => {
      canvasInstance.dispose();
    };
  }, []); // 修复语法错误

  const handleImageUpload = (event) => {
    const file = event.target.files[0];

    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        const imageUrl = reader.result;
        setBackgroundImage(imageUrl);
      };
      reader.readAsDataURL(file);
    }
  };

  const setBackgroundImage = (imageUrl) => {
    if (!canvas) return; // 新增非空判断
    const img = new Image();
    img.src = imageUrl;
    img.onload = () => {
      const fabricImage = new FabricImage(img, {
        selectable: false,
        evented: false,
      });

      const scaleFactor = Math.min(canvasSize.width / img.width, canvasSize.height / img.height);
      fabricImage.scale(scaleFactor);

      // 适配Fabric.js v5+ API，手动调用渲染
      canvas.setBackgroundImage(fabricImage, {
        scaleX: canvas.width / fabricImage.width,
        scaleY: canvas.height / fabricImage.height
      });
      canvas.renderAll();
    };
    img.onerror = () => {
      console.error('Failed to load image');
    };
  };

  const clearCanvas = () => {
    if (!canvas) return; // 新增非空判断
    canvas.clear();
    canvas.backgroundColor = 'white';
    canvas.renderAll();
  };

  const saveCanvasAsPNG = () => {
    if (!canvas) return; // 新增非空判断
    const dataURL = canvas.toDataURL({
      format: 'png',
      quality: 1,
    });
    const link = document.createElement('a');
    link.href = dataURL;
    link.download = 'canvas.png';
    link.click();
  };

  const addPredefinedImage = () => {
    const imageUrl = 'wallet-transparent.png';
    setBackgroundImage(imageUrl);
  };

  const addTextToCanvas = () => {
    if (!canvas) return; // 新增非空判断
    const text = new Textbox('Editable Text', {
      left: 100,
      top: 100,
      width: 200,
      fontSize: 20,
      editable: true,
      fill: 'black',
    });

    canvas.add(text);
    canvas.setActiveObject(text);
    canvas.renderAll();
  };

  return (
    <div className='Container'>
      <div className='Canvas-Wrapper'>
        <div className='Buttons-Wrapper'>
          <input
            type="file"
            accept="image/*"
            onChange={handleImageUpload}
            style={{ marginTop: '10px' }}
          />
          <button onClick={clearCanvas}>Clear Canvas</button>
          <button onClick={saveCanvasAsPNG}>Save as PNG</button>
          <button onClick={addTextToCanvas}>Add Text</button>
        </div>
        <div className='Canvas'>
          <canvas ref={canvRef} />
        </div>
      </div>
      <img
        src="wallet-transparent.png"
        alt="Wallet"
        className='Wallet'
        onClick={addPredefinedImage}
        style={{ cursor: 'pointer', marginTop: '10px' }}
      />
    </div>
  );
};

export default CanvasComponent;

额外说明 #

如果使用的是Fabric.js v4版本，setBackgroundImage可以保留原回调写法，但仍需添加非空判断：

canvas.setBackgroundImage(fabricImage, canvas.renderAll.bind(canvas), {
  scaleX: canvas.width / fabricImage.width,
  scaleY: canvas.height / fabricImage.height
});

内容的提问来源于stack exchange，提问作者Akram Abuhajar