通过上传字段添加图片到Fabric.js canvas时被选中却被遮挡如何解决？

问题修复方案 #

核心原因 #

• 同时使用URL.createObjectURL和FileReader两种方式加载图片，重复给img.src赋值引发异步加载逻辑冲突，fabric.Image实例化时图片资源未完成稳定加载，导致初始渲染时绘制层级、位置计算异常
• 未主动设置新添加图片的层级，当画布已有其他元素时新图片默认层级可能低于已有元素，被遮挡后只有拖拽时fabric会自动将激活元素提至顶层，才会正常显示
• 原有代码中的图片加载错误回调存在未定义file变量的语法问题

修复后代码 #

首先优化readURLForSticker函数，删除冗余加载逻辑，增加层级设置，确保资源加载完成后再操作画布：

function readURLForSticker(input) {
  TypeBelettering = "sticker";
  if (input.files && input.files[0]) {
    const file = input.files[0];
    const imgs = new Image();
    // 如果存在跨域图片加载需求可保留下行，无需求可删除
    imgs.crossOrigin = 'anonymous';
    
    imgs.onload = function () {
      // 原图尺寸计算逻辑移到加载完成回调内，保证取值准确
      originalImageHeightPX = this.height;
      originalImageWidthPX = this.width;
      imageHeightMM = originalImageHeightPX * 0.2645833333;
      imageWidthMM = originalImageWidthPX * 0.2645833333;
      
      // 图片加载完成后再初始化fabric图片实例
      const stickerImage = new fabric.Image(imgs);
      canvas.add(stickerImage);
      canvas.centerObject(stickerImage);
      // 主动将新添加的图片置顶，避免被已有元素遮挡
      stickerImage.moveTo(canvas.getObjects().length - 1);
      canvas.setActiveObject(stickerImage);
      canvas.renderAll();
    };
    
    imgs.onerror = function () {
      alert("not a valid file: " + file.type);
    };
    
    // 仅保留性能更高的createObjectURL加载方式即可满足需求
    imgs.src = _URL.createObjectURL(file);
    imageUploaded = true;
  }
}

原有上传触发逻辑无需修改：

$("#upload-picture").change(function() {
  readURLForSticker(this);
});

效果说明 #

修改后上传的图片会自动出现在画布顶层居中位置，无需拖拽即可正常显示，同时去掉了冗余的FileReader操作，加载速度也会有所提升。

内容的提问来源于stack exchange，提问作者Kai van Megen