@evolor/image-rect-vue3

多选区图片标注 Vue3 组件，基于 ImageRectSelect 封装，支持双向绑定、ref 实例、按需引用。

安装

npm install @evolor/image-rect-vue3

在线demo

在线demo源码

在线demo

用法

<template>
  <RectSelect
    ref="rectSelect"
    v-model:rects="rects"
    :src="imgUrl"
    style="width:600px;height:400px;"
  />
  <RectRenderer
    ref="rectRenderer"
    :src="imgUrl"
    v-model:rect="rect"
    :mode="mode"
    style="width:180px;height:120px;"
  />
  <div>
    <label><input type="radio" v-model="mode" value="contain" /> contain</label>
    <label style="margin-left:12px;"><input type="radio" v-model="mode" value="cover" /> cover</label>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { RectSelect, RectRenderer } from '@evolor/image-rect-vue3'

const imgUrl = '...'
const rects = ref([])
const rect = ref({})
const mode = ref('contain')
const rectSelect = ref(null)
const rectRenderer = ref(null)
</script>

获取原生实例

rectSelect.value.rectSelect // 即 ImageRectSelect 实例
rectRenderer.value.imageRectRenderer // 即 ImageRectRenderer 实例

下载带标注图片

rectSelect.value.rectSelect.downloadAnnotatedImage('result.png')

组件说明

RectSelect 组件

• 用于图片多选区标注、裁剪、导出等。
• 支持 PC/移动端交互。
• 支持双向绑定、ref 实例、外部初始化、导出图片等。

RectRenderer 组件

• 用于将图片的某个选区区域渲染到指定容器，常用于选区预览、缩略图、裁剪结果展示等场景。
• 支持 v-model:rect 双向绑定，src 属性传入图片。
• 支持 mode 属性，'contain'（默认）或 'cover'，决定选区如何适配容器。
• ref 可获取 ImageRectRenderer 实例。

Props

RectSelect

• src：图片地址
• rects：选区数组，支持 v-model:rects

RectRenderer

• src：图片地址
• rect：选区对象，支持 v-model:rect
• mode：渲染模式，'contain'（默认）或 'cover'

Emits

• update:rects：RectSelect 选区变化时触发
• update:rect：RectRenderer 选区变化时触发（如后续支持交互）

插槽

• 默认插槽为容器

目录结构

src/
  components/RectSelect.vue
  components/RectRenderer.vue
  ImageRectSelect.js
  ImageRectRenderer.js
  index.js
demo/
  App.vue
  main.js
  index.html

运行 Demo

npm install
npm run dev
# 浏览器自动打开 http://localhost:5173/demo/index.html

其它建议

• 推荐用 Vite 作为开发/打包工具
• 组件样式可自定义
• 后续可扩展工具栏、导出、只读等功能
• 如需支持 Vue2，可用 vue-demi 适配（建议优先支持 Vue3）

License

MIT