label-image

React 图片内容标记组件，用于圈出图片四边形内容并获取标记点坐标。Vue版本请参考组件vue-image-label

预览

安装

yarn add @dengnanhao/image-label

使用

import LabelImage from "@dengnanhao/image-label";

function App() {
  return (
    <div className="App">
      <LabelImage url="https://stbrain.kjt.zj.gov.cn/Documents/ac681331-de00-4fcb-b082-27159b32f6c5/Instruments/43%20%E7%A2%B3%E7%A1%AB%E5%88%86%E6%9E%90%E4%BB%AA.jpg" />
    </div>
  );
}

属性说明

| 属性名 | 说明 | 类型 | 是否必填 | 默认值 | | -------------- | -------------------------------------- | ---------------- | -------- | ------ | | url | 图片地址 | string | 是 | - | | containerProps | 组件容器属性，可以设置容器的宽度、高度 | Container | 否 | - | | pointProps | 标记点属性 | Point | 否 | - | | lineProps | 线属性 | Line | 否 | - | | getPoints | 获取图片上的点坐标 | (points) => void | 否 | - |

Container

| 属性名 | 说明 | 类型 | 是否必填 | 默认值 | | ------ | ---- | ------ | -------- | ------ | | width | 宽度 | number | 是 | 1000 | | height | 高度 | number | 否 | 800 |

Point

| 属性名 | 说明 | 类型 | 是否必填 | 默认值 | | ------ | ---- | ------ | -------- | ------ | | size | 大小 | number | 否 | 10 | | color | 颜色 | string | 否 | red |

Line

| 属性名 | 说明 | 类型 | 是否必填 | 默认值 | | ------ | ---- | ------ | -------- | ------ | | width | 宽度 | number | 否 | 2 | | color | 颜色 | string | 否 | red |