给图片上画个点

创建一个新的Vue组件，比如CanvasImageWithPoints.vue。

CanvasImageWithPoints.vue

<template>
    <div> 
        <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight"></canvas> 
    </div>    
 </template> 
 <script lang="ts" setup> 
 import { ref, onMounted } from 'vue';
 const canvasRef = ref<HTMLCanvasElement | null>(null);
 const imageUrl = 'https://example.com/your-image.jpg'; 
 onMounted(async () => {
  drawOnCanvas();
});
const drawOnCanvas = () => {
    const canvas = canvasRef.value!; // 非空断言，因为在onMounted时DOM已经渲染
    const ctx = canvas.getContext('2d')!; // 同样，getContext通常不会返回null

    const image = new Image();
    image.crossOrigin = 'Anonymous'; // 设置crossOrigin属性以处理可能的CORS问题
    image.src = imageUrl;

    image.onload = () => {
      // 清除画布（如果需要）
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制图片
      ctx.drawImage(image, 0, 0,canvas.width, canvas.height);

      // 在指定区域绘制点
      drawPoints(ctx, [
        { x:56, y: 59 },
        { x:66, y: 69 },
        // 添加更多点的坐标
      ]);
    };

    // 处理图片加载错误
    image.onerror = (error) => {
      console.error('Failed to load image:', error);
    };
  };
 const drawPoints = (ctx: CanvasRenderingContext2D, points: { x: number; y: number }[]) => {
  points.forEach(point => {
    ctx.beginPath();
    ctx.arc(point.x, point.y,1.5, 0, Math.PI * 2, true); // 绘制一个半径为5的圆
    ctx.fillStyle = 'red'; // 设置填充颜色
    ctx.fill();
    ctx.closePath();
  });
};

 </script> 
 <style scoped> 
 /* 你可以在这里添加样式 */ 
 </style>

使用组件

在应用的某个地方（比如App.vue）引入并使用这个组件：

<template>
  <div id="app">
    <CanvasImageWithPoints />
  </div>
</template>

<script>
import CanvasImageWithPoints from './components/CanvasImageWithPoints.vue';

export default {
  name: 'App',
  components: {
    CanvasImageWithPoints
  }
};
</script>

<style>
/* 你的全局样式 */
</style>