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>