Angular 2+如何实现上传图片绘制区域获取坐标并导出JSON

下面是适配Angular 2+版本的三种可行实现路径，你可以根据项目复杂度选择：

方案1：原生DOM+Canvas自研组件（可控度最高，无额外依赖） #

• 先实现图片上传逻辑：用FileReader读取用户上传的图片，渲染到页面的img标签，同时叠加一个和图片大小完全一致的透明Canvas或者div层作为绘制载体
• 监听载体层的鼠标事件：mousedown记录区域起始坐标，mousemove实时绘制区域预览边框，mouseup记录结束坐标完成单次绘制
• 坐标换算：所有绘制的坐标需要根据图片显示大小和原始尺寸的比例做换算，确保导出的坐标是原始图片的真实坐标，不会因为页面缩放、图片自适应大小出现偏移
• 绘制完成后把所有区域数据存在数组里，直接JSON序列化就能导出，同时可以动态生成<map>和<area>标签，复用你现有的硬编码图像映射的交互逻辑

方案2：基于成熟Canvas库封装（开发效率最高） #

可以直接用fabric.js这个Canvas操作库做Angular封装，它自带图形绘制、坐标获取、图形编辑/删除的现成API，不用自己从零实现鼠标交互和绘制逻辑：

• 安装fabric.js依赖后在angular.json里引入对应的JS文件，封装成自定义组件或者服务调用即可
• 上传的图片直接绘制到fabric的画布实例，所有绘制的图形可以直接调用实例方法拿到坐标，换算后导出JSON即可

方案3：轻量适配现有逻辑（改造成本最低） #

如果不需要太复杂的绘制交互，可以直接在你现有的硬编码逻辑基础上改造：

• 上传图片后在img标签上叠加一个透明div层，监听div的鼠标事件来绘制区域
• 绘制完成后直接把坐标赋值给动态生成的<area>标签的coords属性，完全兼容你现在的<map>标签逻辑，不用改现有交互代码

// Angular 组件简化示例
import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-image-mapper',
  template: `
    <!-- 图片上传入口 -->
    <input type="file" (change)="handleUpload($event)" accept="image/*">
    
    <!-- 图片+绘制层容器 -->
    <div class="img-wrap" style="position: relative;display: inline-block;">
      <img #imgRef [src]="imgSrc" *ngIf="imgSrc" usemap="#dynamicWorkmap">
      <div 
        #drawLayer 
        class="draw-layer" 
        style="position: absolute;inset: 0;cursor: crosshair;"
        (mousedown)="startDraw($event)"
        (mousemove)="onDrawMove($event)"
        (mouseup)="finishDraw($event)"
      ></div>
    </div>

    <!-- 动态生成的map节点 -->
    <map name="dynamicWorkmap">
      <area 
        *ngFor="let item of areaList" 
        [shape]="item.shape" 
        [coords]="item.coords.join(',')" 
        [alt]="item.label"
        (click)="onAreaClick(item)"
      >
    </map>

    <!-- 导出按钮 -->
    <button (click)="exportCoords()" *ngIf="areaList.length">导出坐标JSON</button>
  `
})
export class ImageMapperComponent {
  @ViewChild('imgRef') imgRef: ElementRef<HTMLImageElement>;
  @ViewChild('drawLayer') drawLayer: ElementRef<HTMLDivElement>;

  imgSrc = '';
  areaList: Array<{shape: 'rect'|'circle'|'poly', coords: number[], label: string}> = [];
  
  private isDrawing = false;
  private startPos = {x: 0, y: 0};

  // 处理图片上传
  handleUpload(event: Event) {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = e => this.imgSrc = e.target?.result as string;
    reader.readAsDataURL(file);
  }

  // 开始绘制
  startDraw(e: MouseEvent) {
    this.isDrawing = true;
    const layerRect = this.drawLayer.nativeElement.getBoundingClientRect();
    this.startPos = {
      x: e.clientX - layerRect.left,
      y: e.clientY - layerRect.top
    };
  }

  // 绘制中（可自行添加实时边框绘制逻辑）
  onDrawMove(e: MouseEvent) {
    if (!this.isDrawing) return;
  }

  // 完成绘制
  finishDraw(e: MouseEvent) {
    if (!this.isDrawing) return;
    this.isDrawing = false;

    const layerRect = this.drawLayer.nativeElement.getBoundingClientRect();
    const endPos = {
      x: e.clientX - layerRect.left,
      y: e.clientY - layerRect.top
    };

    // 坐标换算为原始图片尺寸的真实坐标
    const imgElem = this.imgRef.nativeElement;
    const scaleRatio = imgElem.naturalWidth / imgElem.offsetWidth;
    const realCoords = [
      Math.round(this.startPos.x * scaleRatio),
      Math.round(this.startPos.y * scaleRatio),
      Math.round(endPos.x * scaleRatio),
      Math.round(endPos.y * scaleRatio)
    ];

    this.areaList.push({
      shape: 'rect',
      coords: realCoords,
      label: `区域${this.areaList.length + 1}`
    });
  }

  // 导出JSON
  exportCoords() {
    const jsonStr = JSON.stringify(this.areaList, null, 2);
    console.log(jsonStr);
    // 可自行添加下载json文件的逻辑
  }

  // 点击区域触发事件
  onAreaClick(item) {
    alert(item.label);
  }
}

• 若需要支持圆形、多边形绘制，只需修改坐标收集逻辑，圆形记录圆心+半径，多边形记录每一次点击的坐标点即可
• 可以额外添加区域删除、编辑、重命名的功能，优化使用体验

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