Image Vue de base64 ou ArrayBuffer

Nov 27 2020

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

1 Dan Nov 28 2020 at 01:23

Vous pouvez stocker les données d'image dans Vuex

Boutique:

const state = {
  imgData: null
}

En supposant que vous obtenez base64de 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>