Nardjo / select-image-area

A tool for select a rectangular area and draw the coordinates.

How to use?

With npm

npm i select-image-area

Exemple for Vue.js 2.0

<template>
    <div>
        <img ref="img" @moving="getEventDataArea" @resizing="getEventDataArea" :src="image.url" alt="">
    </div>
</template

<script>
    import selectImageArea from "./src/main.ts"

    export default {

        data() {
            return {
                area: {}
            }
        },

        methods: {
            selectArea() {
                selectImageArea(this.$refs.img, {...this.area})
            },

            getEventDataArea(e) {
                this.area = {coordinates: {...e.detail.coordinates}, size: {...e.detail.size}}
            },
        }
</script>

Configuration

• minHeight: number
  
• minWidth: number
  
• coordinates: x number y number
  
• size: w number h number