setup

resources/js/admin/components/modals/CropperModal.vue

@@ -0,0 +1,56 @@
+<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>

resources/js/admin/components/modals/ImgPopModal.vue

@@ -0,0 +1,48 @@
+<template>
+	<div>
+		<b-modal :id="'img-pop-modal'" size="lg" scrollable>
+			<template v-slot:modal-title>
+				<h4 class="modal-title">{{ label }}</h4>
+			</template>
+			<div v-if="img[0]" class="text-center">
+				<img class="img-fluid" 
+                	:src="img[0].file_info.original.file"
+                	width="300px" height="300px"
+                >
+			</div>
+			<template v-slot:modal-footer>
+				<form>
+					<v-btn
+                        depressed
+                        small
+                        type="button"
+                        color="warning"
+                        class="m-0"
+                        @click="$bvModal.hide('img-pop-modal')"
+                    >
+                        Close
+                    </v-btn>
+				</form>     
+			</template>
+		</b-modal>
+	</div>
+</template>
+
+<script>
+	import VueCropper from 'vue-cropperjs';
+	export default {
+		props: ['label', '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>