Skip to content

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

Notifications You must be signed in to change notification settings

Nardjo/select-image-area

Repository files navigation

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

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published