问题是，坐标来自后端，我不能改变他们，不知何故，我需要像你一样，因为你在img中看到有大约40个坐标为1图像，我有大约100图像，我不能他们手动
来自后端的img尺寸为1664 × 2344  
根据后端提供的信息，在组件中设置原始图像尺寸（1664x2344）。
根据前端当前显示的图像大小和原始尺寸计算缩放因子。将缩放应用于坐标：使用缩放因子调整从后端接收的坐标。我在这个stackblitz中调整了它们。
你的app.component.ts是：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild('imgPath', { static: false }) imgElementRef!: ElementRef;
  coordinateX!: number;
  coordinateY!: number;
  originalCoordinates: any; // To store original coordinates
  columns = [
    {
      itemNumber: '1',
      partNumber: '4400535240',
      coordinates: [
        {
          itemCounter: 0,
          xposition: 970,
          yposition: 375,
        },
      ],
    },
    {
      itemNumber: '2',
      partNumber: '4400541680',
      coordinates: [
        {
          itemCounter: 0,
          xposition: 1282,
          yposition: 522,
        },
      ],
    },
    {
      itemNumber: '4',
      partNumber: '4400541390',
      coordinates: [
        {
          itemCounter: 0,
          xposition: 445,
          yposition: 307,
        },
      ],
    },
  ];

  constructor() {
    // Deep copy of original columns to preserve original coordinates
    this.originalCoordinates = JSON.parse(JSON.stringify(this.columns));
  }

  ngAfterViewInit() {
    // Calculate and apply scaling when the view is initialized
    this.calculateAndApplyScaling();
  }

  showCorner(event: any) {
    // Calculate and apply scaling
    this.calculateAndApplyScaling();

    // Use the scaled coordinates
    this.coordinateX = event.coordinates[0].xposition;
    this.coordinateY = event.coordinates[0].yposition + 80;

    // Log coordinates to console
    console.log('Selected Coordinates:', this.coordinateX, this.coordinateY);

    // Update the border element
    this.updateBorderElement();
  }

  private calculateAndApplyScaling() {
    const imgElement = this.imgElementRef.nativeElement as HTMLImageElement;
    const currentWidth = imgElement.clientWidth;
    const currentHeight = imgElement.clientHeight;

    console.log(
      'Image Current Width:',
      currentWidth,
      'Current Height:',
      currentHeight
    );

    // Use naturalWidth and naturalHeight properties
    const originalWidth = imgElement.naturalWidth;
    const originalHeight = imgElement.naturalHeight;

    const scaleX = currentWidth / this.originalWidth;
    const scaleY = currentHeight / this.originalHeight;

    console.log('Scale Factor X:', scaleX, 'Scale Factor Y:', scaleY);

    // Apply scale factors to each original coordinate
    this.columns.forEach((column, index) => {
      column.coordinates.forEach((coordinate, coordIndex) => {
        const originalCoordinate =
          this.originalCoordinates[index].coordinates[coordIndex];
        coordinate.xposition = originalCoordinate.xposition * scaleX;
        coordinate.yposition = originalCoordinate.yposition * scaleY;

        console.log(
          `Original Coordinates: (${originalCoordinate.xposition}, ${originalCoordinate.yposition}), Scaled Coordinates: (${coordinate.xposition}, ${coordinate.yposition})`
        );
      });
    });
  }

  private updateBorderElement() {
    const recElement = document.getElementById('rec1') as HTMLElement;
    if (recElement) {
      recElement.style.border = '2px solid red';
      recElement.style.width = '25px';
      recElement.style.height = '25px';
      recElement.style.left = this.coordinateX + 'px';
      recElement.style.top = this.coordinateY + 'px';

      console.log(
        'Border Element Updated:',
        `Left: ${this.coordinateX}px, Top: ${this.coordinateY}px`
      );
    }
  }

  addBorder(event: any) {
    console.log('Add Border Event:', event);
    const e = event.target.getBoundingClientRect();
    console.log('Bounding Client Rect:', e);
    const xClientH = event.screenY;
    const xClientY = event.screenX;

    this.coordinateX = xClientY;
    this.coordinateY = xClientH;
    console.log(
      'Coordinates from Event:',
      `X: ${this.coordinateX}, Y: ${this.coordinateY}`
    );

    const recElement = document.getElementById('rec1') as HTMLInputElement;
    if (recElement) {
      recElement.innerHTML =
        "<img src='../../assets/flow-editor/Image/rec.gif' style='width:25px; height:25px;'></img>";
    }
  }
}

字符串
HTML代码确保定位是相对于图像的父容器的绝对位置。

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of columns">
      <td (click)="showCorner(row)">{{ row.itemNumber }}</td>
      <td (click)="showCorner(row)">{{ row.partNumber }}</td>
    </tr>
  </tbody>
</table>

<div class="flex-1 relative">
  <div class="relative">
    <img
      #imgPath
      (click.double)="addBorder($event)"
      style="width: 832px; max-width: fit-content;"
      src="../../assets/flow-editor/Image/ev00129014.png"
    />
    <div
      id="rec1"
      class="absolute"
      [ngStyle]="{ left: coordinateX + 'px', top: coordinateY + 'px' }"
    ></div>
  </div>
</div>

型
请注意，我必须将任何资源路径从../assets/...调整到../../assets/...，以确保资源图像正确显示。