simple-image-label

View English readme | 查看中文版readme
Simple image annotate use in JavaScript , support YOLO and VOC annotate point for object detection or deep-learning.

Preview

!preview

Use in your project

$3

``bash

npm

npm install simple-image-label -S

yarn

yarn add simple-image-label

pnpm

pnpm add simple-image-label
`
#### Use in JavaScript

`html

`

`js
// use require
const SimpleImageLabel = require('../libs/simpleImageLabel').default
// use es6 import
import SimpleImageLabel from '../libs/simpleImageLabel'
// use simple image label in your html element, must use id selector
const simpleImageLabel = new SimpleImageLabe({
el: 'YourElementId',
imageUrl: 'yourImageUrl',
labels: [],
contextmenu: (e) => {
// mouse right click event
},
labelClick: (label) => {
// label click event
},
error: (err) => {
// error event
console.log(err);
}
});
`

#### Use in vue3

`html


`

#### Use in React
`jsx
import SimpleImageLabel from 'simple-image-label';
import img from './x.png'
import { useEffect } from 'react';
const ImageLabelComponent = () => {
let simpleImageLabel = null
useEffect(() => {
initSimpleDom()
}, [])
function initSimpleDom() {
simpleImageLabel = new SimpleImageLabel({
el: 'YourElementId',
imageUrl: img,
labels: [],
contextmenu: (e) => {
console.log(e);
},
labelClick: (label) => {
console.log(label);
},
error: (e) => {
console.log(e);
}
})
}
function getAllLabels() {
const labels = simpleImageLabel.getLabels()
console.log('labels', labels);
}
return (

Get all labels

);
}
export default ImageLabelComponent;
`

Develop & Install & Run demo

Install
`bash

npm

npm install

yarn

yarn

pnpm

pnpm install
`

Run
`bash

npm

npm run start

yarn

yarn start

pnpm

pnpm run start
`

Build
`bash

npm

npm run build

yarn

yarn build

pnpm

pnpm run build
`

API

$3

| Property | Type | Description |
| ------------- | ---------- | ----------------------------- |
| el | string | Html element id |
| imageUrl | string | Image path |
| labels | array | default labels |
| readOnly | boolean | Enable/Disable read only mode |
| contextmenu | function | right click event |
| labelClick | function | left click event |
| error | function | error event |

$3

| function | params | Description |
| -------------------------------- | ------------ | --------------------------------------------- |
| getLabels() | - | Get all labels |
| activeLabel() | - | Get active label |
| setImage(imageUrl) | imageUrl | Set image |
| setLabels(labels) | labels | Set labels |
| getImageInfo() | - | Get image width and height |
| getCoordinate(label) | label | Get label coordinate |
| getLabelsCoordinate() | - | Get all labels coordinate |
| convertToYoloCoordinate(label) | label | Get label YOLO coordinate |
| getLabelsYoloCoordinate() | - | Get all labels YOLO coordinate |
| setLabelActive(uuid) | uuid | Set label active status by uuid |
| clearAllLabelActive() | - | Clear active status |
| removeAllLabels() | - | Remove all labels |
| removeLabelByUuid(uuid) | uuid | Remove a label by uuid |
| setLabelByUuid(uuid, attr) | uuid, attr | Set label attr by uuid. attr type is object |
| getLabelByUuid(uuid) | uuid | Get label by uuid |
| setReadOnly(readOnly) | readOnly | Set read only mode.readOnly` type is boolean |