use objectUrl instead of dataUrl

This commit is contained in:
wryk 2019-03-10 23:35:26 +01:00
parent 8eaafa6028
commit f47554e6e1
3 changed files with 14 additions and 9 deletions

View file

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

View file

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

View file

@ -6,10 +6,10 @@
</div> </div>
<div class="preview"> <div class="preview">
<img class="preview-visual" :src="downloading.dataUrl" alt=""> <img class="preview-visual" :src="downloading.objectUrl" alt="">
</div> </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> </div>
</template> </template>