add gif data url to download

src/services/encode.js

@@ -2,7 +2,7 @@ import EncodeWorker from '@/services/encode.worker.js'
 
 const PALETTE_SIZE = 255
 
-export function encode (imageDataList, imageWidth, imageHeight, paletteSize, delayTime) {
+export function encode ({ imageDataList, imageWidth, imageHeight, delayTime }) {
   return new Promise((resolve, reject) => {
     const worker = new EncodeWorker()
 
@@ -21,7 +21,8 @@ export function encode (imageDataList, imageWidth, imageHeight, paletteSize, del
           break
 
         case 'done':
-          const dataUrl = 'data:image/gif;base64,' + btoa(payload.buffer.map((b) => String.fromCharCode(b)).join(''))
+          const base64Content = btoa(payload.buffer.map((b) => String.fromCharCode(b)).join(""))
+          const dataUrl = "data:image/gif;base64," + base64Content
           resolve(dataUrl)
           break
       }

src/store.js

@@ -21,7 +21,8 @@ export default new Vuex.Store({
       status: false
     },
     downloading: {
-      status: false
+      status: false,
+      dataUrl: null
     }
   },
   mutations: {
@@ -50,11 +51,13 @@ export default new Vuex.Store({
     stopEncoding (store) {
       store.encoding.status = false
     },
-    startDownloading (store) {
+    startDownloading (store, dataUrl) {
       store.downloading.status = true
+      store.downloading.dataUrl = dataUrl
     },
     stopDownloading (store) {
       store.downloading.status = false
+      store.downloading.dataUrl = null
     }
   },
   actions: {
@@ -82,16 +85,11 @@ export default new Vuex.Store({
       console.log(captureData)
 
       encode(captureData)
-        .then(clipDataUrl => {
+        .then(dataUrl => {
           commit('stopEncoding')
-          commit('startDownloading')
-          console.log(clipDataUrl)
-        })
-        .catch(error => {
-          console.error(error)
-          commit('stopEncoding')
-          commit('startDownloading')
+          commit('startDownloading', dataUrl)
         })
+        .catch(error => console.error(error))
     }
   }
 })

src/views/download.vue

@@ -6,7 +6,7 @@
     </div>
 
     <div class="preview">
-      <img class="preview-visual" src="https://unsplash.it/320/320" alt="">
+      <img class="preview-visual" :src="downloading.dataUrl" alt="">
     </div>
 
     <button class="download-btn btn btn--primary w100">Download GIF</button>
@@ -14,8 +14,15 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: 'download',
+  computed: {
+    ...mapState([
+      'downloading'
+    ])
+  },
   methods: {
     back () {
       this.$store.commit('stopDownloading')