Multi Select Areas Image
Live Demos
https://demo-multi-select-areas-image.herokuapp.com
Installation
With npm or yarn
yarn add multi-select-areas-image
npm i multi-select-areas-image
For Vue.js 2.0
Use multi-select-areas-image component:
Typical use:
// main.js
import MultiSelectAreasImage from 'multi-select-areas-image'
...
Vue.use(MultiSelectAreasImage)
.vue file:
<template>
<div>
<multi-select-areas-image :cropUrl="url" :width="500" />
</div>
</template>
<script>
export default {
data() {
return {
url:
'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
};
},
};
</script>
Props
cropUrl
Type: String
Required: true
Default: null
Input Url image into the box
width
Type: Number
Required: false
Default: 1000
Set width image area
opacityOutline
Type: Number
Required: false
Default: 0.5
Set opacity outline border box select area
opacityOverlay
Type: Number
Required: false
Default: 0.5
Set opacity overlay on image
$emit
<template>
<div>
<multi-select-areas-image v-on:getListAreas="getListAreas" />
</div>
</template>
<script>
export default {
data() {
return {
areas: [],
};
},
methods: {
getListAreas(value) {
// console.log(value)
this.areas = value;
},
},
};
</script>
getListAreas
Params: Null
Return: Array
Contributors
✨
Thanks goes to these wonderful people (emoji key):
 quanghung97 |
 vunt-0906 |
This project follows the all-contributors specification. Contributions of any kind welcome!
12 Jan 1, 2023
25 Sep 12, 2022
17 Sep 18, 2022
96 Dec 27, 2022
27 Dec 27, 2022
0 Dec 12, 2019
4.5k Jan 2, 2023
6.3k Dec 30, 2022
2.6k Jan 1, 2023
95 Dec 30, 2022
239 Nov 18, 2022
15 Nov 24, 2022
46 Nov 24, 2022
348 Dec 26, 2022
38 Nov 24, 2022
72 Dec 17, 2022
556 Dec 27, 2022
51 Jul 23, 2020