mkeshita/ai-datasetviewer

对视频或者图片ai识别的数据进行canvas绘图

ai-dataset-viewer

组件提供画线条、多边形、像素混合功能和例子。 基本涵盖常见算法输出的数据。

Installation

yarn add ai-datasetviewer

Documentation

Usage

  import DatasetViewer from 'datasetviewer'

  const config:DatasetViewerConfig = {...}

  const viewer = new DatasetViewer(config)

  viewer.init(callback)

DatasetViewerConfig

name	type	descriptions
canvasInstance	HTMLCanvasElement	canvas标签，ref
url	string	展示图片地址
data	Array	canvas绘画的每一项数据
opreationsConfig	OpreationsConfig	能否缩放拖动的控制
isDraw	boolean	控制是否绘画数据

DataItem

name	type	descriptions
type	CustomRect | polyline | CustomPolygon | 更多请查看fabric	必填项，这是画布应该用什么工具处理数据的前提
label	string	标签名
points	Array<{x:number, y:number}>	多边形或者折线的坐标点
stroke	string	颜色
fill	string	颜色
rectData	[x,y,w,h]	起点坐标，宽高
drawPoint	boolean	是否需要画点

OpreationsConfig

name	type	descriptions
zoom	boolean	是否缩放

---

数据转换例子

注意：如果项目比较注重性能，请注意源数据的精度，最好把浮点数去掉 简单来说，检测就是画框。单目3D也是画框，不过是多个不规则多边形的组合。 姿态检测类型的就是线段、或者折线的绘画。 分割比较特殊，需要看算法怎么输出mask数据类型。一般是用像素存储数据,看你们怎么规定约束条件。用canvas像素diff数据，混合就行。（最简单的混合就是srgb+颜色/2完事）。这一块和这个绘图组件无关，更多的是canvas操作数据问题。 分类可以忽略，直接绝对定位一个标签就行。

car_pose_detection (单目3d同理) detection （简单的画框） pose_detection 通用分割