Replace vue-advanced-cropper with vue-cropperjs
This commit is contained in:
Minzkraut
198
package-lock.json
generated
198
package-lock.json
generated
@@ -1752,6 +1752,63 @@
|
||||
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
|
||||
"dev": true
|
||||
},
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"loader-utils": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
|
||||
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
}
|
||||
},
|
||||
"ssri": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
|
||||
@@ -1760,6 +1817,28 @@
|
||||
"requires": {
|
||||
"minipass": "^3.1.1"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"vue-loader-v16": {
|
||||
"version": "npm:vue-loader@16.8.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
|
||||
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"chalk": "^4.1.0",
|
||||
"hash-sum": "^2.0.0",
|
||||
"loader-utils": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -3134,11 +3213,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"classnames": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
|
||||
"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
|
||||
},
|
||||
"clean-css": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
|
||||
@@ -3823,6 +3897,11 @@
|
||||
"sha.js": "^2.4.8"
|
||||
}
|
||||
},
|
||||
"cropperjs": {
|
||||
"version": "1.5.12",
|
||||
"resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.5.12.tgz",
|
||||
"integrity": "sha512-re7UdjE5UnwdrovyhNzZ6gathI4Rs3KGCBSc8HCIjUo5hO42CtzyblmWLj6QWVw7huHyDMfpKxhiO2II77nhDw=="
|
||||
},
|
||||
"cross-spawn": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
|
||||
@@ -4096,11 +4175,6 @@
|
||||
"integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
|
||||
"dev": true
|
||||
},
|
||||
"debounce": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
|
||||
"integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
|
||||
},
|
||||
"debug": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
|
||||
@@ -4576,11 +4650,6 @@
|
||||
"stream-shift": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"easy-bem": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz",
|
||||
"integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A=="
|
||||
},
|
||||
"easy-stack": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/easy-stack/-/easy-stack-1.0.1.tgz",
|
||||
@@ -11877,16 +11946,6 @@
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
|
||||
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
|
||||
},
|
||||
"vue-advanced-cropper": {
|
||||
"version": "1.10.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-advanced-cropper/-/vue-advanced-cropper-1.10.1.tgz",
|
||||
"integrity": "sha512-obEcM5DvDE4VfX32p21X3Kk5gGo9nbEttm+SEgk4X380SSS5JNWkzjSfWLBYQnZ+9pI2BKsuISbymeH1P68dbg==",
|
||||
"requires": {
|
||||
"classnames": "^2.2.6",
|
||||
"debounce": "^1.2.0",
|
||||
"easy-bem": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"vue-cli-plugin-vuetify": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.4.2.tgz",
|
||||
@@ -11924,6 +11983,14 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-cropperjs": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-cropperjs/-/vue-cropperjs-4.2.0.tgz",
|
||||
"integrity": "sha512-dvwCBtjGMiznkNIK2GFd1SQm1x+wmtWg4g4t+NrJSPj/fpHnubXxAUOIvY7lMFeR2lawRLsigCaGZrcXCzuTKA==",
|
||||
"requires": {
|
||||
"cropperjs": "^1.5.6"
|
||||
}
|
||||
},
|
||||
"vue-eslint-parser": {
|
||||
"version": "7.10.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.10.0.tgz",
|
||||
@@ -11983,87 +12050,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-loader-v16": {
|
||||
"version": "npm:vue-loader@16.8.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
|
||||
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"chalk": "^4.1.0",
|
||||
"hash-sum": "^2.0.0",
|
||||
"loader-utils": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"loader-utils": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
|
||||
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-script2": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-script2/-/vue-script2-2.1.0.tgz",
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
"core-js": "^3.6.5",
|
||||
"file-saver": "^2.0.5",
|
||||
"vue": "^2.6.11",
|
||||
"vue-advanced-cropper": "^1.10.1",
|
||||
"vue-cropperjs": "^4.2.0",
|
||||
"vue-google-adsense": "^1.10.1",
|
||||
"vue-script2": "^2.1.0",
|
||||
"vuetify": "^2.4.0"
|
||||
|
||||
@@ -1,148 +1,116 @@
|
||||
<template>
|
||||
<div>
|
||||
<Intro header="Card Designer" body="This Tool is currently being build..." />
|
||||
<Intro header="Card Designer" body="This Tool is currently being built...<br />Mobile cropper might behave weird. " />
|
||||
<v-row justify="center" class="pa-10">
|
||||
<div class="button-wrapper">
|
||||
<v-btn class="button" @click="$refs.file.click()">
|
||||
<input v-show="false" type="file" ref="file" @change="loadImage($event)" accept="image/*">
|
||||
Load image
|
||||
<input
|
||||
ref="input"
|
||||
type="file"
|
||||
name="image"
|
||||
accept="image/*"
|
||||
@change="setImage"
|
||||
/>
|
||||
<v-btn class="button ma-10" @click="showFileChooser()">
|
||||
Open Image
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-row>
|
||||
<v-row justify="center" class="pa-10">
|
||||
<cropper ref="cropper"
|
||||
class="cropper"
|
||||
@change="onChange"
|
||||
:debounce="false"
|
||||
:src="image.src"
|
||||
:stencil-props="{
|
||||
handlers: {},
|
||||
movable: false,
|
||||
scalable: false,
|
||||
aspectRatio: 300/500,
|
||||
}"
|
||||
:resize-image="{
|
||||
adjustStencil: false
|
||||
}"
|
||||
image-restriction="stencil"
|
||||
/>
|
||||
<div class="card-container">
|
||||
<img id="frame" src="../assets/cards/overlay.png" alt="">
|
||||
<Preview id="card"
|
||||
:image="result.image"
|
||||
:coordinates="result.coordinates"
|
||||
|
||||
/>
|
||||
<div id="card" :style="{ backgroundImage : 'url(' + result.image + ')' }"></div>
|
||||
</div>
|
||||
<v-btn class="button ma-10" @click="crop()">
|
||||
Save Image
|
||||
</v-btn>
|
||||
<v-row justify="center">
|
||||
|
||||
<section class="cropper-area">
|
||||
<div class="img-cropper">
|
||||
<vue-cropper
|
||||
ref="cropper"
|
||||
:src="imgSrc"
|
||||
preview=".custom-preview"
|
||||
:viewMode="2"
|
||||
:zoomable="true"
|
||||
:aspectRatio="3/5"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="preview-area">
|
||||
<div class="card-container">
|
||||
<img id="frame" src="../assets/cards/overlay.png" alt="">
|
||||
<div class="custom-preview" />
|
||||
</div>
|
||||
<v-btn class="button ma-10" @click="cropImage()">
|
||||
Save Image
|
||||
</v-btn>
|
||||
</section>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cropper, Preview } from 'vue-advanced-cropper';
|
||||
import 'vue-advanced-cropper/dist/style.css';
|
||||
|
||||
import { saveAs } from 'file-saver';
|
||||
import Intro from './Intro.vue';
|
||||
import VueCropper from 'vue-cropperjs';
|
||||
import 'cropperjs/dist/cropper.css';
|
||||
|
||||
// This function is used to detect the actual image type,
|
||||
function getMimeType(file, fallback = null) {
|
||||
const byteArray = (new Uint8Array(file)).subarray(0, 4);
|
||||
let header = '';
|
||||
for (let i = 0; i < byteArray.length; i++) {
|
||||
header += byteArray[i].toString(16);
|
||||
}
|
||||
switch (header) {
|
||||
case "89504e47":
|
||||
return "image/png";
|
||||
case "47494638":
|
||||
return "image/gif";
|
||||
case "ffd8ffe0":
|
||||
case "ffd8ffe1":
|
||||
case "ffd8ffe2":
|
||||
case "ffd8ffe3":
|
||||
case "ffd8ffe8":
|
||||
return "image/jpeg";
|
||||
default:
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Cropper, Preview, Intro
|
||||
VueCropper, Intro
|
||||
},
|
||||
data: () => ({
|
||||
image: {
|
||||
src: null,
|
||||
type: null
|
||||
},
|
||||
result: {
|
||||
coordinates: null,
|
||||
image: null,
|
||||
dataUrl: null
|
||||
}
|
||||
imgSrc: require("../assets/cards/akashi_placeholder.jpg"),
|
||||
cropImg: '',
|
||||
data: null
|
||||
}),
|
||||
methods: {
|
||||
cropImage() {
|
||||
// get image data for post processing, e.g. upload or setting image src
|
||||
this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
|
||||
this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
|
||||
let i = new FormData()
|
||||
i.append('picture', blob)
|
||||
console.log(i)
|
||||
saveAs(blob, "custom-card");
|
||||
})
|
||||
|
||||
},
|
||||
crop() {
|
||||
const { canvas } = this.$refs.cropper.getResult();
|
||||
canvas.toBlob((blob) => {
|
||||
saveAs(blob);
|
||||
}, this.image.type);
|
||||
},
|
||||
onChange({ coordinates, image }) {
|
||||
this.result = {
|
||||
coordinates,
|
||||
image
|
||||
};
|
||||
},
|
||||
|
||||
reset() {
|
||||
this.image = {
|
||||
src: null,
|
||||
type: null
|
||||
}
|
||||
},
|
||||
loadImage(event) {
|
||||
// Reference to the DOM input element
|
||||
const { files } = event.target;
|
||||
// Ensure that you have a file before attempting to read it
|
||||
if (files && files[0]) {
|
||||
// 1. Revoke the object URL, to allow the garbage collector to destroy the uploaded before file
|
||||
if (this.image.src) {
|
||||
URL.revokeObjectURL(this.image.src)
|
||||
}
|
||||
// 2. Create the blob link to the file to optimize performance:
|
||||
const blob = URL.createObjectURL(files[0]);
|
||||
|
||||
// 3. The steps below are designated to determine a file mime type to use it during the
|
||||
// getting of a cropped image from the canvas. You can replace it them by the following string,
|
||||
// but the type will be derived from the extension and it can lead to an incorrect result:
|
||||
//
|
||||
// this.image = {
|
||||
// src: blob;
|
||||
// type: files[0].type
|
||||
// }
|
||||
|
||||
// Create a new FileReader to read this image binary data
|
||||
setImage(e) {
|
||||
const file = e.target.files[0];
|
||||
|
||||
if (file.type.indexOf('image/') === -1) {
|
||||
alert('Please select an image file');
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof FileReader === 'function') {
|
||||
const reader = new FileReader();
|
||||
// Define a callback function to run, when FileReader finishes its job
|
||||
reader.onload = (e) => {
|
||||
// Note: arrow function used here, so that "this.image" refers to the image of Vue component
|
||||
this.image = {
|
||||
// Set the image source (it will look like blob:http://example.com/2c5270a5-18b5-406e-a4fb-07427f5e7b94)
|
||||
src: blob,
|
||||
// Determine the image type to preserve it during the extracting the image from canvas:
|
||||
type: getMimeType(e.target.result, files[0].type),
|
||||
};
|
||||
|
||||
reader.onload = (event) => {
|
||||
this.imgSrc = event.target.result;
|
||||
// rebuild cropperjs with the updated source
|
||||
this.$refs.cropper.replace(event.target.result);
|
||||
};
|
||||
// Start the reader job - read file as a data url (base64 format)
|
||||
reader.readAsArrayBuffer(files[0]);
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
alert('Sorry, FileReader API not supported');
|
||||
}
|
||||
},
|
||||
showFileChooser() {
|
||||
this.$refs.input.click();
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
// Revoke the object URL, to allow the garbage collector to destroy the uploaded before file
|
||||
@@ -155,11 +123,18 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
//FIXME: Outsource styles
|
||||
.cropper {
|
||||
min-height: 500px;
|
||||
max-height: 600px;
|
||||
max-width: 400px;
|
||||
background: transparent;
|
||||
.img-cropper {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.custom-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
|
||||
Reference in New Issue
Block a user