Angular集成Fabric.js开发图片编辑器时拖拽图片到画布失效报错

• 优先排查dragstart阶段的数据源绑定缺失：当前素材图仅设置了draggable="true"，但未在拖拽开始时向原生DragEvent的dataTransfer写入对应图片的URL引用，导致drop回调执行时无法获取有效的图片对象，自然出现读取src的undefined报错。需要给每个循环渲染的素材图补充拖拽开始事件绑定，在事件触发时把当前图片的URL存入dataTransfer。
• 排查循环渲染元素的重复ID问题：当前素材图节点在*ngFor循环中被设置了固定id="testImage"，多图渲染时会产生重复DOM ID，若drop回调中通过全局ID查找图片节点，不仅会定位到错误的元素，在Angular变更检测触发节点回收时，甚至会拿到null/undefined的节点引用，访问其src属性就会触发报错。
• 校验canvas容器的默认拖拽行为拦截：浏览器默认禁止外部元素拖放到普通页面节点上，若未给画布容器绑定dragover事件并执行preventDefault()，drop事件无法正常触发，事件参数会出现数据缺失，也会引发对象读取异常。
• 补全方法内的空值拦截逻辑：在handleDropOnCanvas读取图片src属性前，先判断当前获取到的拖拽源、事件数据是否为有效对象，加前置拦截逻辑避免无意义的属性访问报错。
• 对齐拖拽落点的坐标换算逻辑：拿到有效图片URL后，需要将浏览器视口下的拖拽落点坐标，减去canvas容器的视口偏移量，得到Fabric画布内部的真实坐标，不要直接使用固定偏移位置添加图片。

可参考的实现逻辑 #

素材图节点事件绑定修改：

<img 
  draggable="true" 
  class="images-item-upload" 
  *ngFor='let url of urls' 
  [src]="url?.url"  
  (click)="addImageOnCanvas(url.url);"
  (dragstart)="onMaterialDragStart($event, url.url)"
/>

对应拖拽相关的方法实现：

// 素材图拖拽开始时写入数据
onMaterialDragStart(e: DragEvent, imgUrl: string) {
  e.dataTransfer.setData('application/fabric-img', imgUrl);
  // 解决Angular环境下dataTransfer被清空的问题
  e.dataTransfer.effectAllowed = 'copy';
}

// 画布drop事件处理
handleDropOnCanvas(e: DragEvent) {
  e.preventDefault();
  // 前置空值判断
  const imgUrl = e.dataTransfer.getData('application/fabric-img');
  if (!imgUrl) return;
  
  // 坐标换算
  const canvasRect = this.canvas.lowerCanvasEl.getBoundingClientRect();
  const dropPosX = e.clientX - canvasRect.left;
  const dropPosY = e.clientY - canvasRect.top;

  // 加载图片到画布
  fabric.Image.fromURL(imgUrl, (image) => {
    image.set({
      left: dropPosX,
      top: dropPosY,
      angle: 0,
      padding: 10,
      cornersize: 10,
      hasRotatingPoint: true,
      title: this.urlName
    });
    image.scaleToWidth(Math.round(this.size.width / 2));
    this.extend(image, this.randomId());
    this.canvas.add(image);
    this.selectItemAfterAdded(image);
    this.updateLayers();
  });
}

内容的提问来源于stack exchange，提问作者Mr.M