@evolor/image-rect

多选区图片标注与区域渲染组件，支持 PC/移动端，支持按需引用与整体引用。

安装

npm install @evolor/image-rect
# 或
yarn add @evolor/image-rect

按需引用（推荐）

import { ImageRectSelect, ImageRectRenderer } from '@evolor/image-rect';

整体引用（不推荐，tree-shaking 失效）

import * as ImageRect from '@evolor/image-rect';
// ImageRect.ImageRectSelect, ImageRect.ImageRectRenderer

在线demo

在线demo代码

在线demo

用法示例

1. 图片多选区标注

import { ImageRectSelect } from '@evolor/image-rect';

const selector = new ImageRectSelect(document.getElementById('container'));
selector.loadImage('your-image-url.jpg');

// 监听选区变化
selector.onChange(rects => {
  console.log(rects); // [{x, y, w, h, rx, ry, rw, rh, ...}]
});

// 外部设置选区（支持像素/百分比/自定义颜色）
selector.setRects([
  { x: 100, y: 100, w: 200, h: 150, color: '#00ff00' },
  { rx: 0.1, ry: 0.2, rw: 0.3, rh: 0.4, color: '#ff00ff' }
]);

// 导出带标注图片
selector.downloadAnnotatedImage('result.png');
selector.exportAnnotatedImage().then(blob => {
  // 可用于上传
});

// 获取图片信息（静态方法）
ImageRectSelect.getImageInfo('your-image-url.jpg')
  .then(imageInfo => {
    console.log('图片尺寸:', imageInfo.width, 'x', imageInfo.height);
  })
  .catch(error => {
    console.error('获取图片信息失败:', error);
  });

2. 区域图片渲染

import { ImageRectRenderer } from '@evolor/image-rect';

const renderer = new ImageRectRenderer(document.getElementById('preview'));
renderer.setMode('contain'); // 或 'cover'
renderer.render('your-image-url.jpg', { x: 100, y: 100, w: 200, h: 150 });

3. 运行 Demo

npm install
npm run build
# 用 VSCode Live Server 或 http-server 打开 demo/index.html

API 文档

ImageRectSelect

• constructor(container: HTMLElement,options)
• loadImage(url: string)
• setRects(rects: Array)
• onChange(callback: (rects) => void)
• getRectsInfo(): Array
• downloadAnnotatedImage(filename?: string)
• exportAnnotatedImage(type?: string): Promise<Blob>
• clearRects()
• selectRectById(id)
• destroy()
• getImageInfo(url: string): Promise<{width: number, height: number}> (静态方法)

options 参数说明

options 用于自定义 ImageRectSelect 组件的行为和样式。常用配置项如下：

• selectedColor：选中选区的高亮颜色，默认 #ff9800。
• rectColor：选区边框颜色，默认 #ff9800。
• disabled：是否禁用编辑，true 时无法新建/编辑/删除选区，默认 false。
• resize：选区是否可缩放，支持 'both'（可缩放）、'none'（不可缩放），默认 'both'。
• fps：如果加载的是视频流图片，可设置数字以显示视频帧率，默认 undefined。

示例：

ImageRectRenderer

• constructor(container: HTMLElement)
• setMode(mode: 'contain' | 'cover')
• render(url: string, rect: {x, y, w, h} | {rx, ry, rw, rh})

目录结构

src/
  ImageRectSelect.js
  ImageRectRenderer.js
  index.js
demo/
  index.html
dist/
  ...

Tree-shaking 说明

• 推荐按需引用：import { ImageRectSelect } from '@evolor/image-rect'
• 整体引用（import * as ImageRect ...）会导致全部打包进来，不推荐。

License

MIT