Immagine Vue da base64 o ArrayBuffer

Question

Ho un backend flask, che invia un'immagine al frontend vue come descritto qui :

with open('my_image_file.jpg', 'rb') as f:
    image_data = f.read()
emit('IMAGE', {'image_data': image_data})

Sul frontend vue, l'immagine dovrebbe infine essere mostrata sulla pagina web. Immagino che il modo più semplice sarebbe salvare in qualche modo l'immagine nella cartella statica. Avrei un'azione come questa nel mio negozio:

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

    /* What needs to be done to save image in 'static/' ?*/

    commit.commit('image_saved')
  }
}

Sono anche aperto a modi alternativi per salvare l'immagine e renderla sulla pagina web. Posso salvare l'immagine direttamente nel negozio vuex?

Answer 1

È possibile memorizzare i dati dell'immagine in Vuex

Negozio:

const state = {
  imgData: null
}

Supponendo che tu stia ottenendo base64dall'API, salva i dati grezzi:

commit('SET_IMAGE_DATA', image);

Oppure, se ottieni un ArrayBuffer, convertilo prima:

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

^{Metodo da ArrayBuffer a base64 trovato qui}

E usalo nel tuo modello:

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