Gambar Vue dari base64 atau ArrayBuffer

Question

Saya memiliki backend flask, yang mengirimkan gambar ke vue frontend seperti yang dijelaskan di sini :

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

Pada vue frontend, gambar pada akhirnya harus ditampilkan di halaman web. Saya kira cara termudah adalah dengan menyimpan gambar di Folder statis. Saya akan memiliki tindakan seperti ini di toko saya:

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

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

    commit.commit('image_saved')
  }
}

Saya juga terbuka untuk cara alternatif untuk menyimpan gambar dan merendernya di halaman web. Bisakah saya menyimpan gambar langsung di toko vuex?

Answer 1

Anda dapat menyimpan data gambar di Vuex

Toko:

const state = {
  imgData: null
}

Dengan asumsi Anda mendapatkan base64dari API, lakukan data mentah:

commit('SET_IMAGE_DATA', image);

Atau, jika Anda mendapatkan ArrayBuffer, ubah dulu:

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

^{Metode ArrayBuffer ke base64 ditemukan di sini}

Dan gunakan di template Anda:

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