vue 点击鼠标在图片上绘制一个或多个矩形框

你可以使用 HTML5 的 canvas 标签和 JavaScript 实现在图片上绘制矩形框。具体步骤如下：

1. 在 HTML 中创建一个 canvas 标签，设置它的宽和高以及图片的路径：

<canvas id="myCanvas" width="500" height="500"></canvas>
<img id="myImage" src="path/to/image.jpg" />

2. 在 JavaScript 中获取 canvas 和图片对象，并将图片绘制到 canvas 上：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

var img = document.getElementById('myImage');
ctx.drawImage(img, 0, 0);

3. 监听 canvas 的鼠标点击事件，获取鼠标点击的坐标，并绘制矩形框：

canvas.addEventListener('mousedown', function(event) {
  var rect = canvas.getBoundingClientRect();
  var x = event.clientX - rect.left;
  var y = event.clientY - rect.top;

  ctx.beginPath();
  ctx.rect(x, y, 50, 50);
  ctx.strokeStyle = 'red';
  ctx.stroke();
});

这里的代码只绘制了一个固定大小的矩形框，你可以根据需要自行修改。另外，如果需要绘制多个矩形框，可以将每个矩形框的坐标存储在数组中，并在鼠标点击事件中依次绘制。