Image Vue de base64 ou ArrayBuffer
J'ai un backend flask, qui envoie une image au frontend vue comme décrit ici :
with open('my_image_file.jpg', 'rb') as f:
image_data = f.read()
emit('IMAGE', {'image_data': image_data})
Sur le frontend vue, l'image devrait finalement être affichée sur la page Web. Je suppose que le moyen le plus simple serait de sauvegarder l'image dans le dossier statique. J'aurais une action comme celle-ci dans mon magasin:
const actions = {
SOCKET_IMAGE (commit, image) {
console.log("image received")
/* What needs to be done to save image in 'static/' ?*/
commit.commit('image_saved')
}
}
Je suis également ouvert à d'autres méthodes pour enregistrer l'image et la rendre sur la page Web. Puis-je enregistrer l'image directement dans la boutique vuex?
Réponses
Vous pouvez stocker les données d'image dans Vuex
Boutique:
const state = {
imgData: null
}
En supposant que vous obtenez base64
de l'API, validez les données brutes:
commit('SET_IMAGE_DATA', image);
Ou, si vous obtenez un ArrayBuffer
, convertissez-le d'abord:
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);
ArrayBuffer à la méthode base64 trouvée ici
Et utilisez-le dans votre modèle:
<template>
<div>
<img :src="'data:image/png;base64,' + $store.state.imgData" />
</div>
</template>