如何在Blazor中初始化Fabric.js Canvas并正确复用实例？

你遇到的canvas.add不是函数问题，本质是Blazor JS互操作无法正确传递fabric.js的Canvas实例——因为Blazor对跨边界传递的对象会做序列化处理，传递的并不是原始的fabric实例，自然无法调用其方法。最优方案是在JS侧通过闭包封装来保存Canvas实例，所有操作直接复用该实例，无需从Blazor传递。

具体实现步骤 #

1. 重构JS工具类（闭包封装实例） #

修改wwwroot/js/ImageEditor.js，用立即执行函数表达式（IIFE）创建闭包，内部保存fabric Canvas实例，对外暴露初始化和操作方法：

const ImageEditor = (() => {
    // 闭包内保存fabric Canvas实例，外部无法直接访问
    let _fabricCanvas = null;

    return {
        // 初始化画布，传入canvas DOM元素ID
        setup: (canvasId) => {
            const canvasElement = document.getElementById(canvasId);
            if (!canvasElement) return false;
            
            _fabricCanvas = new fabric.Canvas(canvasElement);
            return true;
        },

        // 添加图片到画布
        addImage: (imageUrl) => {
            if (!_fabricCanvas) throw new Error('画布未初始化，请先调用setup方法');
            
            fabric.Image.fromURL(imageUrl, img => {
                _fabricCanvas.add(img);
                _fabricCanvas.renderAll();
            });
        },

        // 示例：添加矩形
        addRectangle: (width, height, left, top, fillColor) => {
            if (!_fabricCanvas) throw new Error('画布未初始化，请先调用setup方法');
            
            const rect = new fabric.Rect({
                width, height, left, top, fill: fillColor || '#ff0000'
            });
            _fabricCanvas.add(rect);
            _fabricCanvas.renderAll();
        }
    };
})();

// 暴露到window对象，供Blazor调用
window.ImageEditor = ImageEditor;

2. Blazor组件中调用JS方法 #

在Razor组件中通过IJSRuntime调用封装好的JS方法，无需传递任何实例：

@inject IJSRuntime JS

<div>
    <canvas id="myFabricCanvas" width="600" height="400" style="border: 1px solid #eee;"></canvas>
</div>
<div style="margin-top: 10px;">
    <button @onclick="InitCanvas">初始化画布</button>
    <button @onclick="AddTestImage">添加测试图片</button>
    <button @onclick="AddRedRectangle">添加红色矩形</button>
</div>

@code {
    private async Task InitCanvas()
    {
        var isSuccess = await JS.InvokeAsync<bool>("ImageEditor.setup", "myFabricCanvas");
        if (!isSuccess)
        {
            Console.WriteLine("画布初始化失败：未找到指定ID的canvas元素");
        }
    }

    private async Task AddTestImage()
    {
        try
        {
            await JS.InvokeVoidAsync("ImageEditor.addImage", "https://picsum.photos/200/150");
        }
        catch (JSException ex)
        {
            Console.WriteLine($"添加图片失败：{ex.Message}");
        }
    }

    private async Task AddRedRectangle()
    {
        try
        {
            await JS.InvokeVoidAsync("ImageEditor.addRectangle", 100, 80, 50, 50);
        }
        catch (JSException ex)
        {
            Console.WriteLine($"添加矩形失败：{ex.Message}");
        }
    }
}

3. 关键注意事项 #

• DOM元素就绪时机：如果需要自动初始化画布，不要在OnInitializedAsync中调用setup，要在OnAfterRenderAsync（且firstRender为true时）调用，此时canvas元素已经渲染到DOM中。
• 避免全局污染：用闭包封装实例，不要直接在window下定义单独的canvas变量，防止和其他JS代码命名冲突。
• 错误处理：JS方法中增加实例存在性校验，抛出明确错误，Blazor侧通过捕获JSException处理异常场景。

内容的提问来源于stack exchange，提问作者Ivan Debono