FabricJs升级至1.4.13后报Cannot read property 'className' of null错误求助

问题原因 #

你升级到Fabric.js 1.4.13后出现这个错误，核心原因是新版本对fabric.Image构造函数的参数要求更严格了。在1.4.0版本中，传入空字符串''可能有兼容处理，但1.4.13里，fabric.Image的构造函数必须接收一个有效的HTMLImageElement对象（或者能被正确解析的图像资源）。当你传入空字符串时，内部逻辑无法生成有效的图像实例，最终尝试读取一个null对象的className属性，导致报错。

解决方案 #

这里提供两种可行的解决办法，你可以根据自己的代码习惯选择：

方法1：先创建空的HTMLImageElement实例

const options = { 
  id: client.ProfileId, 
  className: 'img_wifiClient', // 注意：Fabric.js中用className而非class（class是JS关键字）
  left: (transX + client_left) * canvasFabric.scale, 
  top: (transY + client_top) * canvasFabric.scale, 
  selectable: true, 
  hasBorders: false, 
  hasControls: false, 
  padding: 0, 
  perPixelTargetFind: true, 
  width: 24, 
  height: 24, 
  originX: 'center', 
  originY: 'center' 
}

// 先创建一个空的HTMLImageElement，再传入fabric.Image构造函数
const emptyImg = new Image();
let image = new fabric.Image(emptyImg);
canvasFabric.add(image);

let src;
if (client.IconName === 'default.png' || client.IconName === null) {
 src = '/Icones/wifi.png';
} else {
 src = `/Icones/${client.IconName}`;
}
image.setSrc(src, function () {
 image.setCoords();
 canvasFabric.renderAll();
}, options);

注意：我把options里的class改成了className，因为class是JavaScript的保留关键字，Fabric.js内部实际使用的是className来设置元素的类名，之前的写法可能在旧版本能运行，但新版本可能会有潜在问题。

方法2：使用fabric.Image.fromURL()直接加载（更推荐）

其实你完全可以跳过创建空fabric.Image实例的步骤，直接用Fabric提供的fromURL方法加载图像，这是更符合官方规范的写法，也能避免构造函数的参数问题：

const options = { 
  id: client.ProfileId, 
  className: 'img_wifiClient',
  left: (transX + client_left) * canvasFabric.scale, 
  top: (transY + client_top) * canvasFabric.scale, 
  selectable: true, 
  hasBorders: false, 
  hasControls: false, 
  padding: 0, 
  perPixelTargetFind: true, 
  width: 24, 
  height: 24, 
  originX: 'center', 
  originY: 'center' 
}

let src;
if (client.IconName === 'default.png' || client.IconName === null) {
 src = '/Icones/wifi.png';
} else {
 src = `/Icones/${client.IconName}`;
}

// 直接通过fromURL加载图像，回调中处理实例配置和添加到画布
fabric.Image.fromURL(src, function(image) {
  image.set(options);
  image.setCoords();
  canvasFabric.add(image);
  canvasFabric.renderAll();
});

额外提示 #

第二种方法更简洁，也减少了中间步骤出错的概率，建议优先采用。另外，如果你后续还有版本升级计划，尽量遵循Fabric.js官方文档的API使用规范，避免依赖旧版本的兼容行为。

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