Obraz Vue z base64 lub ArrayBuffer
Nov 27 2020
Mam backend flask, który wysyła obraz do frontendu vue, jak opisano tutaj :
with open('my_image_file.jpg', 'rb') as f:
image_data = f.read()
emit('IMAGE', {'image_data': image_data})
W interfejsie vue obraz powinien ostatecznie pojawić się na stronie. Myślę, że najłatwiejszym sposobem byłoby jakoś zapisać obraz w folderze statycznym. W moim sklepie miałbym taką akcję:
const actions = {
SOCKET_IMAGE (commit, image) {
console.log("image received")
/* What needs to be done to save image in 'static/' ?*/
commit.commit('image_saved')
}
}
Jestem również otwarty na alternatywne sposoby zapisania obrazu i wyrenderowania go na stronie internetowej. Czy mogę zapisać obraz bezpośrednio w sklepie vuex?
Odpowiedzi
1 Dan Nov 28 2020 at 01:23
Możesz przechowywać dane obrazu w Vuex
Sklep:
const state = {
imgData: null
}
Zakładając, że korzystasz base64
z interfejsu API, zatwierdź nieprzetworzone dane:
commit('SET_IMAGE_DATA', image);
Lub, jeśli otrzymujesz ArrayBuffer
, najpierw przekonwertuj go:
function _arrayBufferToBase64( buffer ) {
var binary = '';
var bytes = new Uint8Array( buffer );
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode( bytes[ i ] );
}
return window.btoa( binary );
}
const imgData = _arrayBufferToBase64(image)
commit('SET_IMAGE_DATA', imgData);
Metoda ArrayBuffer na base64 znajduje się tutaj
I użyj go w swoim szablonie:
<template>
<div>
<img :src="'data:image/png;base64,' + $store.state.imgData" />
</div>
</template>