请用代码示例 在vue中使用Fabric.js对两张静态图片用圆点进行标记

首先需要安装Fabric.js：

npm install fabric --save

然后在Vue组件中引入Fabric.js：

import { fabric } from 'fabric';

接下来在Vue组件中定义两张图片的路径：

data() {
  return {
    image1: '/static/image1.jpg',
    image2: '/static/image2.jpg'
  }
}

在Vue组件的mounted()方法中，使用Fabric.js对两张图片进行标记：

mounted() {
  // 加载图片1
  fabric.Image.fromURL(this.image1, (img) => {
    // 创建canvas对象
    const canvas1 = new fabric.Canvas('canvas1');
    // 设置canvas大小
    canvas1.setWidth(img.width);
    canvas1.setHeight(img.height);
    // 添加图片到canvas
    canvas1.add(img);

    // 绘制圆点
    const circle = new fabric.Circle({
      radius: 5,
      fill: 'red',
      left: 50,
      top: 50
    });
    // 添加圆点到canvas
    canvas1.add(circle);
  });

  // 加载图片2
  fabric.Image.fromURL(this.image2, (img) => {
    // 创建canvas对象
    const canvas2 = new fabric.Canvas('canvas2');
    // 设置canvas大小
    canvas2.setWidth(img.width);
    canvas2.setHeight(img.height);
    // 添加图片到canvas
    canvas2.add(img);

    // 绘制圆点
    const circle = new fabric.Circle({
      radius: 5,
      fill: 'blue',
      left: 100,
      top: 100
    });
    // 添加圆点到canvas
    canvas2.add(circle);
  });
}

最后在Vue组件的模板中添加canvas元素：

<template>
  <div>
    <canvas id="canvas1"></canvas>
    <canvas id="canvas2"></canvas>
  </div>
</template>

这样就可以实现在Vue中使用Fabric.js对两张静态图片用圆点进行标记了。