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

Use in your project

Install simple-image-label

# npm
npm install simple-image-label -S
# yarn
yarn add simple-image-label
# pnpm
pnpm add simple-image-label

Use in JavaScript

<div id="YourElementId"></div>

// 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

<template>
    <div id="YourElementId"></div>
</template>
<script setup>
import SimpleImageLabel from 'simple-image-label'
import { ref, onMounted } from 'vue';
const simpleImageLabel = ref(null);
onMounted(() => {
    simpleImageLabel.value = new SimpleImageLabel({
        el: 'YourElementId'
        imageUrl: props.imageUrl,
        labels: props.labels,
        contextmenu: (e) => {
            emit('contextmenu', e)
        },
        labelClick: (label) => {
            emit('labelClick', label)
        },
        error: (e) => {
            emit('error', e)
        }
    });
})
</script>

Use in React

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 (
        <div>
            <div id="YourElementId"></div>
            <button onClick={getAllLabels}>Get all labels</button>
        </div>
    );
}
export default ImageLabelComponent;

Develop & Install & Run demo

Install

# npm
npm install
# yarn
yarn
# pnpm
pnpm install

Run

# npm
npm run start
# yarn
yarn start
# pnpm
pnpm run start

Build

# npm
npm run build
# yarn
yarn build
# pnpm
pnpm run build

API

SimpleImageLabel options

| 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 |

SimpleImageLabel function

| 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 |