vue3-image-multiselect-areas

Vue 3 typescript lib, with ability to select area on the image and leave comments.

screencast-localhost_5173-2023.01.17-22_55_14.webm

Demo

Live Demo.

Installation

# with npm
npm install vue3-image-multiselect-areas

# with yarn
yarn add vue3-image-multiselect-areas

Basic usage

import ImageSelectArea from 'vue3-image-multiselect-areas';

<image-select-area
  image-url="https://yourimageurl.jpg"
  :width="900"
  :height="700"
  border-color="#0FB839"
  border-width="2"
  @save-data="saveDataHandler"
/>

Types

interface IAreaData {
  index: number,
  lineWidth: number,
  color: string,
  comment: string,
  coordinates: {
    width: number,
    height: number,
    x: number,
    y: number,
  },
}

Props

| NAME | TYPE | DEFAULT | DESCRIPTION | |-------------------|--------------|--------------------------|----------------------------| | imageUrl? | String | - | Image url | | id? | String | imageSelectArea | Component id | | width? (px) | Number | 500 | Component width | | height? (px) | Number | 400 | Component height | | borderWidth? (px) | Number | 1 | Selected area border width | | borderColor? | String | #000000 | Selected area border color | | initAreas? | IAreaData[] | imageSelectArea | Preinited areas values |

Events

| NAME | PARAMS TYPE | DESCRIPTION | |-----------|-------------|--------------------------------------------------------------------| | save-data | IAreaData[] | Fires after area resizing, dragging or comments field focus losing |

Styling

Styling on you. Here classes you can use for that:

| NAME | DESCRIPTION | |---------------|----------------------------------------| | selected-area | Selected area wrapper class | | active-area | Added to selected area when it focused | | area-comment | Comment text block class | | delete-button | Delete area button class |