本文详解在 Blazor Server 应用中集成 Fabric.js 时，如何安全初始化 canvas 实例并避免因 JS 对象引用丢失导致的 canvas.add is not a function 错误，推荐采用全局缓存 + 封装调用模式。
本文详解在 blazor server 应用中集成 fabric.js 时，如何安全初始化 canvas 实例并避免因 js 对象引用丢失导致的 `canvas.add is not a function` 错误，推荐采用全局缓存 + 封装调用模式。
在 Blazor 中调用 Fabric.js 时，一个常见误区是试图将 JavaScript 创建的 fabric.Canvas 实例通过 IJSRuntime.InvokeAsync
✅ 正确做法是：在 JavaScript 端完成 canvas 的生命周期管理，避免跨边界传递实例。推荐两种稳健方案：
方案一：JS 端封装组合操作（推荐）
将初始化与绘图逻辑封装为单个 JS 函数，完全规避对象传递：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
// wwwroot/js/ImageEditor.js
window.fabricFunctions = {
// 全局缓存 canvas 实例（可选，用于多步操作）
_canvas: null,
setup: function () {
if (!this._canvas) {
this._canvas = new fabric.Canvas('canvasId');
// 统一配置
fabric.Object.prototype.transparentCorners = false;
fabric.Object.prototype.cornerColor = 'blue';
fabric.Object.prototype.cornerStyle = 'circle';
}
return this._canvas;
},
// 封装「初始化 + 添加图形」为原子操作
setupAndAddRect: function () {
const canvas = this.setup();
const rect = new fabric.Rect({
left: 100,
top: 50,
fill: 'yellow',
width: 200,
height: 100,
objectCaching: false,
stroke: 'lightgreen',
strokeWidth: 4,
});
canvas.add(rect);
canvas.setActiveObject(rect);
canvas.renderAll(); // 确保立即渲染
},
// 若需后续操作（如清空、导出），复用同一 canvas 实例
clearCanvas: function () {
this._canvas?.clear();
}
};
对应 Blazor 组件只需一行调用：
@page "/"
@inject IJSRuntime JSRuntime
<div class="controls">
<button>添加矩形</button>
<button>清空画布</button>
</div>
<canvas id="canvasId" width="400" height="300" style="border: 1px solid #ccc;"></canvas>
@code {
private async Task AddRectangle() =>
await JSRuntime.InvokeVoidAsync("fabricFunctions.setupAndAddRect");
private async Task ClearCanvas() =>
await JSRuntime.InvokeVoidAsync("fabricFunctions.clearCanvas");
}
方案二：使用 JS 全局变量 + 显式状态检查（备选）
若需更细粒度控制（如分步初始化、动态 canvas ID），可在 JS 中维护 canvas 引用，并在调用前校验有效性：
// 在 setup 中显式赋值全局变量
setup: function (canvasId) {
if (!window.fabricCanvas || window.fabricCanvas.__canvasId !== canvasId) {
window.fabricCanvas = new fabric.Canvas(canvasId);
window.fabricCanvas.__canvasId = canvasId; // 标识来源
}
return window.fabricCanvas;
},
addRect: function () {
if (!window.fabricCanvas) {
throw new Error('Canvas not initialized. Call setup() first.');
}
// ... 同上添加逻辑
}
⚠️ 关键注意事项
- 禁止跨边界传递 Fabric 实例：fabric.Canvas 是纯 JS 对象，Blazor 无法安全往返传输。
- 确保 DOM 就绪：
