canvas.setBackgroundImage 不是一个函数Reactjs-Fabricjs

Question

我正在开发一个项目，其中我使用fabricjs和reactjs。我正在尝试通过输入标签上传图像并将其设置为画布的背景。

这是我的代码：

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

canvas.setBackgroundImage(fabricImage, canvas.renderAll.bind(canvas), {
scaleX: canvas.width / fabricImage.width,
scaleY: canvas.height / fabricImage.height
         });
     };
img.onerror = () => {
console.error('Failed to load image');
     };
 };

const clearCanvas = () => {
canvas.clear();
canvas.backgroundColor = 'white';
canvas.renderAll();
 };

const saveCanvasAsPNG = () => {
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 = () => {
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;

我收到的错误是函数 canvas.setbackgroundimage 不是一个函数 - 有谁知道这个问题的解决方案吗？

文档中确实存在一些研究和功能，但由于某种原因没有显示给我。

Answer 1

canvas.set("backgroundImage", fabricImage)