Vue-Image von base64 oder ArrayBuffer

Question

Ich habe ein Flaschen-Backend, das ein Bild an das Vue-Frontend sendet, wie hier beschrieben :

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

Im Vue-Frontend sollte das Bild letztendlich auf der Webseite angezeigt werden. Ich denke, der einfachste Weg wäre, das Bild irgendwie im statischen Ordner zu speichern. Ich hätte eine Aktion wie diese in meinem Laden:

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

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

    commit.commit('image_saved')
  }
}

Ich bin auch offen für alternative Möglichkeiten, das Bild zu speichern und auf der Webseite zu rendern. Kann ich das Bild direkt im vuex Store speichern?

Answer 1

Sie können die Bilddaten in Vuex speichern

Geschäft:

const state = {
  imgData: null
}

Angenommen, Sie erhalten base64von der API, schreiben Sie die Rohdaten fest:

commit('SET_IMAGE_DATA', image);

Oder, wenn Sie eine bekommen ArrayBuffer, konvertieren Sie sie zuerst:

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 zu base64 Methode gefunden hier}

Und verwenden Sie es in Ihrer Vorlage:

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