Javascript image annotate, use in deep learning
npm install simple-image-labelbash
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 (
);
}
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 |