前端如何给图片添加标注

Question

如何给这种图片添加标记或图标，这是原图

实现如下效果，添加的标记能适应不同分辨率和窗体大小，固定的显示在图片的指定位置。，类似于就是一张图片，无论怎么缩放，调整，看着都是一个整体。因为需要修改上面标注的颜色。所以不能直接使用图片

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

前端如何给图片添加标注

你想实现的是在图片上添加标注或图标，并且标注能适应不同分辨率和窗体大小，固定显示在图片的指定位置。

一种实现方法是使用 HTML5 的 canvas 元素和 JavaScript。首先，使用 canvas 元素将图片绘制到画布上，然后使用 JavaScript 将标注绘制到画布上。

以下是一个简单的示例代码：

<canvas id="canvas" width="400" height="300"></canvas>
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();
  img.src = 'your_image_url';
  img.onload = function() {
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    // 绘制标注
    ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
    ctx.fillRect(10, 10, 20, 20); // 绘制一个红色矩形
  };
</script>

在上面的代码中，我们首先获取 canvas 元素，然后获取其 2D 上下文对象 ctx。然后，我们使用 Image 对象加载图片，并在图片加载完成后使用 drawImage 方法将图片绘制到画布上。

最后，我们使用 fillRect 方法绘制一个红色矩形作为标注。这个矩形的位置和大小可以根据需要进行调整。

需要注意的是，这个示例代码只是一个简单的示例，实际实现中可能需要根据具体的需求进行修改和优化。

另外，如果你想实现更加复杂的标注效果，可以考虑使用 SVG 元素和 JavaScript。