feat: single download support for each crop type

added download button on each crop panel

Author: selimdoyranli

components/Panel/CropPanel/CropPanel.component.vue

@@ -37,10 +37,15 @@
       template(v-if="panel.cropper")
         span.crop-panel-footer__label {{ $t('editor.original') }}: {{ panel.cropper.image.width }}x{{ panel.cropper.image.height }}
         span.crop-panel-footer__label {{ $t('editor.cropped') }}: {{ panel.cropper.coordinates.width }}x{{ panel.cropper.coordinates.height }}
+        vs-tooltip(bottom dark not-arrow)
+          vs-button(flat active dark size="mini" :loading="panel.isBusy" :disabled="panel.isBusy" @click="download({ type })")
+            AppIcon(name="charm:download")
+          template(#tooltip)
+            span {{ $t('general.download') }} ({{ $t(`cropType.${type}.title`) }})
 </template>
 
 <script>
-import { defineComponent, useStore, ref, reactive, computed, onMounted, onUnmounted } from '@nuxtjs/composition-api'
+import { defineComponent, useStore, ref, reactive, computed, onMounted } from '@nuxtjs/composition-api'
 import { cropTypeEnum } from '@/enums'
 import useEditor from '@/hooks/useEditor'
 import { Cropper } from 'vue-advanced-cropper'
@@ -81,15 +86,18 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const FileSaver = require('file-saver')
+
     const store = useStore()
-    const { sleep } = useEditor()
+    const { sleep, getFileExtension } = useEditor()
 
     const cropperRef = ref(null)
 
     const isReady = computed(() => store.getters['editor/isReady'])
     const original = computed(() => store.getters['editor/original'])
 
     const panel = reactive({
+      isBusy: false,
       cropper: null
     })
 
@@ -136,13 +144,15 @@ export default defineComponent({
     const handleOnChangeCropper = ({ coordinates, image, visibleArea, canvas }) => {
       panel.cropper = { coordinates, image, visibleArea, canvas }
 
+      panel.isBusy = true
       store.commit('editor/SET_IS_BUSY', true)
 
       canvas.toBlob(blob => {
         store.commit('editor/SET_CROPPED', { type: props.type, coordinates, file: blob })
       }, original.value.file.type)
 
       sleep(1000).then(() => {
+        panel.isBusy = false
         store.commit('editor/SET_IS_BUSY', false)
       })
     }
@@ -151,6 +161,20 @@ export default defineComponent({
       cropperRef.value.zoom(value)
     }
 
+    const cropped = computed(() => store.getters['editor/cropped'])
+
+    const download = ({ type }) => {
+      store.commit('editor/SET_IS_BUSY', true)
+      panel.isBusy = true
+
+      FileSaver.saveAs(cropped.value[type].file, `image-${cropped.value[type].key}.${getFileExtension(original.value.file.name)}`)
+
+      sleep(1000).then(() => {
+        store.commit('editor/SET_IS_BUSY', false)
+        panel.isBusy = false
+      })
+    }
+
     onMounted(() => {
       window.addEventListener('resize', () => {
         if (isReady.value) {
@@ -167,7 +191,8 @@ export default defineComponent({
       handleOnSelectFreeFormRatio,
       getFreeStencilProps,
       handleOnReadyCropper,
-      handleOnChangeCropper
+      handleOnChangeCropper,
+      download
     }
   }
 })

locales/en.js

@@ -30,6 +30,23 @@ export default {
     cropped: 'Cropped',
     freeform: 'Freeform'
   },
+  cropType: {
+    original: {
+      title: 'Original'
+    },
+    horizontal: {
+      title: 'Horizontal'
+    },
+    vertical: {
+      title: 'Vertical'
+    },
+    square: {
+      title: 'Square'
+    },
+    free: {
+      title: 'Free ratio'
+    }
+  },
   credits: {
     description: 'Useful for blog, photo blog, news websites and social media posts.'
   }

locales/tr.js

@@ -30,6 +30,23 @@ export default {
     cropped: 'Kırpılmış',
     freeform: 'Serbest mod'
   },
+  cropType: {
+    original: {
+      title: 'Orijinal'
+    },
+    horizontal: {
+      title: 'Yatay'
+    },
+    vertical: {
+      title: 'Dikey'
+    },
+    square: {
+      title: 'Kare'
+    },
+    free: {
+      title: 'Serbest mod'
+    }
+  },
   credits: {
     description: 'Blog, foto blog, haber siteleri ve sosyal medya postları için kullanışlıdır.'
   }

store/editor/getters.js

@@ -15,6 +15,10 @@ export default {
     return state.original
   },
 
+  cropped(state) {
+    return state.cropped
+  },
+
   horizontalCropped(state) {
     return state.cropped.horizontal
   },