recherche

Maison  >  Questions et réponses  >  le corps du texte

Façons d'obtenir une image : à partir de base64 ou d'ArrayBuffer en utilisant Vue

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})

Dans le front-end de Vue, cette image devrait éventuellement être affichée sur la page web. Je suppose que le moyen le plus simple consiste à enregistrer les images dans un dossier statique. Dans mon magasin, j'aurais une action comme celle-ci :

const actions = {
  SOCKET_IMAGE (commit, image) {
    console.log("image received")

    /* 需要做什么来将图片保存在 'static/' 中?*/

    commit.commit('image_saved')
  }
}

J'aimerais également essayer d'autres méthodes pour enregistrer des images et les rendre sur le Web. Puis-je enregistrer des images directement dans la boutique Vuex ?

P粉953231781P粉953231781460 Il y a quelques jours768

répondre à tous(1)je répondrai

  • P粉198814372

    P粉1988143722023-11-07 13:53:09

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

    Stockage :

    const state = {
      imgData: null
    }
    

    En supposant que vous obtenez base64 de l'API, veuillez soumettre les données brutes :

    commit('SET_IMAGE_DATA', image);
    

    Ou, si vous avez ArrayBuffer, convertissez 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);
    

    Trouvez la méthode pour convertir ArrayBuffer en base64ici

    et utilisez-le dans vos modèles :

    <template>
      <div>
        <img :src="'data:image/png;base64,' + $store.state.imgData" />
      </div>
    </template>
    

    répondre
    0
  • Annulerrépondre