mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/unity.git
synced 2026-08-19 12:24:01 +00:00
glovetleong
56 lines
1.1 KiB
Vue
56 lines
1.1 KiB
Vue
<template>
|
|
<div>
|
|
<b-modal :id="'cropper-modal'" size="lg" scrollable>
|
|
<template v-slot:modal-title>
|
|
<h4 class="modal-title">Crop Image</h4>
|
|
</template>
|
|
<vue-cropper
|
|
ref='cropper'
|
|
:guides="true"
|
|
:view-mode="2"
|
|
drag-mode="crop"
|
|
:auto-crop-area="0.5"
|
|
:min-container-width="250"
|
|
:min-container-height="180"
|
|
:background="true"
|
|
:rotatable="true"
|
|
:src="img"
|
|
alt="Source Image"
|
|
:img-style="{ 'width': '400px', 'height': '300px' }"
|
|
>
|
|
</vue-cropper>
|
|
<template v-slot:modal-footer>
|
|
<form>
|
|
<v-btn
|
|
:block="true"
|
|
type="button"
|
|
color="primary"
|
|
class="white--text"
|
|
@click="cropImage"
|
|
>
|
|
Crop
|
|
</v-btn>
|
|
</form>
|
|
</template>
|
|
</b-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import VueCropper from 'vue-cropperjs';
|
|
export default {
|
|
props: ['img'],
|
|
components: {
|
|
VueCropper
|
|
},
|
|
methods: {
|
|
cropImage() {
|
|
let vm = this;
|
|
let cropImg = '';
|
|
cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
|
|
vm.$bvModal.hide('cropper-modal');
|
|
vm.$emit('clicked', cropImg);
|
|
}
|
|
}
|
|
}
|
|
</script> |