use objectUrl instead of dataUrl

src/services/encode.js

@@ -21,9 +21,10 @@ export function encode ({ imageDataList, imageWidth, imageHeight, delayTime }) {
           break
 
         case 'done':
-          const base64Content = btoa(payload.buffer.map((b) => String.fromCharCode(b)).join(''))
-          const dataUrl = 'data:image/gif;base64,' + base64Content
-          resolve(dataUrl)
+          const byteArray = new Uint8Array(payload.buffer)
+          const blob = new Blob([byteArray], { type: 'image/gif' })
+          const objectUrl = URL.createObjectURL(blob)
+          resolve(objectUrl)
           break
       }
     }

src/store.js

@@ -22,7 +22,7 @@ export default new Vuex.Store({
     },
     downloading: {
       status: false,
-      dataUrl: null,
+      objectUrl: null,
       timestamp: null
     }
   },
@@ -52,14 +52,18 @@ export default new Vuex.Store({
     stopEncoding (store) {
       store.encoding.status = false
     },
-    startDownloading (store, dataUrl) {
+    startDownloading (store, objectUrl) {
       store.downloading.status = true
-      store.downloading.dataUrl = dataUrl
+      store.downloading.objectUrl = objectUrl
       store.downloading.timestamp = Date.now()
     },
     stopDownloading (store) {
+      if (store.downloading.objectUrl) {
+        URL.revokeObjectURL(store.downloading.objectUrl)
+      }
+
       store.downloading.status = false
-      store.downloading.dataUrl = null
+      store.downloading.objectUrl = null
       store.downloading.timestamp = null
     }
   },

src/views/download.vue

@@ -6,10 +6,10 @@
     </div>
 
     <div class="preview">
-      <img class="preview-visual" :src="downloading.dataUrl" alt="">
+      <img class="preview-visual" :src="downloading.objectUrl" alt="">
     </div>
 
-    <a class="download-btn btn btn--primary w100" :href="downloading.dataUrl" :download="`souvenir${downloading.timestamp}.gif`">Download GIF</a>
+    <a class="download-btn btn btn--primary w100" :href="downloading.objectUrl" :download="`souvenir${downloading.timestamp}.gif`">Download GIF</a>
   </div>
 </template>