crop cover image

ForkPoint · Dec 10, 2021 · c296d5a · c296d5a
1 parent 19e785c
commit c296d5a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/components/Attachment.vue b/components/Attachment.vue
@@ -7,6 +7,7 @@
         @closeCropper="closeCropper"
         :content="content"
         :mime="mime"
+        :type="filetype"
         :resizeImage="resizeImage"
       />
     </transition>
@@ -86,6 +87,7 @@ export default {
       showCropper: false,
       tempURL: null,
       mime: null,
+      filetype: null,
     }
   },
   computed: {
@@ -130,6 +132,7 @@ export default {
       }
     },
     imageLoaded(file, type, mime) {
+      console.log(type, mime)
       let reader = new FileReader()
       reader.onload = (f) => {
         let dataURI = f.target.result
@@ -138,7 +141,7 @@ export default {
           .split(':')[1]
           .split('/')[1]
           .match(/^\w+/g)[0]
-        if (type == 'logo' || type == 'cover' || mime.match(/gif|webp/)) {
+        if (type == 'logo' || mime.match(/svg|gif|webp/)) {
           this.content[type] = {
             url: dataURI,
             blob: file,
@@ -148,7 +151,8 @@ export default {
           }
           if (!mime.match(/svg|gif|webp/)) this.resizeImage(type, mime)
         } else {
-          this.content.photo.ext = ext
+          this.content[type].ext = ext
+          this.filetype = type
           this.mime = mime
           this.tempURL = dataURI
           this.showCropper = true

diff --git a/components/Cropper.vue b/components/Cropper.vue
@@ -31,7 +31,7 @@
 import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.css'
 export default {
-  props: ['src', 'mime', 'content', 'resizeImage'],
+  props: ['src', 'mime', 'content', 'resizeImage', 'type'],
   data() {
     return {
       cropper: {},
@@ -45,14 +45,14 @@ export default {
       let vm = this
       const canvas = this.cropper.getCroppedCanvas()
       let url = canvas.toDataURL(this.mime)
-      this.content.photo.url = url
-      this.content.photo.mime = this.mime
+      this.content[this.type].url = url
+      this.content[this.type].mime = this.mime
       canvas.toBlob(
         (blob) => {
-          vm.content.photo.blob = new File([blob], 'photo', {
+          vm.content[vm.type].blob = new File([blob], 'photo', {
             type: this.mime,
           })
-          vm.resizeImage('photo', vm.mime)
+          vm.resizeImage(vm.type, vm.mime)
           vm.$emit('closeCropper')
         },
         this.mime,
@@ -64,8 +64,8 @@ export default {
     this.image = this.$refs.image
     this.cropper = new Cropper(this.image, {
       zoomable: false,
-      scalable: true,
-      aspectRatio: 1,
+      scalable: false,
+      aspectRatio: this.type == 'photo' ? 1 : 3 / 2,
       autoCropArea: 1,
       responsive: true,
       viewMode: 2,
@@ -74,4 +74,4 @@ export default {
     })
   },
 }
-</script>
+</script>