记录一个图片标记的插件markerjs2

1. 直接上代码吧，此处代码是vue2代码,这个插件是用ts写的，所以vue3项目应该也能用。

image-to-annotate11是小图预览。
标记容器是根据image-to-annotate的位置，大小进行的加载，它不能隐藏，我又不想显示，所以就把它的z-index设为负数，放到最底下了。

<div id="app222">
        <img id="image-to-annotate" :src="imageSrc" alt="Image to annotate" ref="image" style="z-index: -100;position: absolute;top: 100px;"/>
        <img id="image-to-annotate11" :src="imageSrc" alt="Image to annotate" ref="image11"  />
        <el-button type="primary" @click="startAnnotation">开始标记</el-button>
        <el-button type="primary" @click="downloadAnnotatedImage" :disabled="!annotatedImageUrl">下载图片</el-button>
      </div>
<script>
import * as markerjs2 from 'markerjs2';
export default {
  name: 'BirdData',
  components: {
    EditModal,
    DownloadModal,
  },
  data() {
    return {
    	imageSrc: require('@/assets/aaa.png'), // 替换为你自己的图片路径
      	annotatedImageUrl: null
    }
  }
},
 methods: {
    startAnnotation() {
      const markerArea = new markerjs2.MarkerArea(this.$refs.image)
      markerArea.uiStyleSettings.zIndex = 19950807
      markerArea.availableMarkerTypes = ['FrameMarker', markerjs2.ArrowMarker]
      // markerArea.style.left = '200px'; // 根据需要调整位置
      console.log(markerArea.uiStyleSettings.left)
      markerArea.addEventListener('render', (event) => {
        this.annotatedImageUrl = event.dataUrl
        this.imageSrc = event.dataUrl
      })
      markerArea.show()
    },
    downloadAnnotatedImage() {
      if (this.annotatedImageUrl) {
        const link = document.createElement('a')
        link.href = this.annotatedImageUrl
        link.download = 'annotated-image.png'
        link.click()
      }
    }
}

<style lang="less" scoped>
@import "../../css/tableBg.less";
#app222 {
  text-align: center;
  margin-top: 50px;
}

#image-to-annotate {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

#image-to-annotate11 {
  max-width: 200px;
  height: auto;
  margin-bottom: 20px;
}
</style>
<style>

/* .__markerjs2_ {
  position: absolute;
  top: 70px !important;
  left: 300px !important;
  width: 1100px !important;
} */

</style>