Cara untuk mendapatkan imej: dari base64 atau ArrayBuffer menggunakan Vue

Question

Saya mempunyai bahagian belakang Flask yang menghantar imej ke bahagian hadapan Vue seperti yang diterangkan di sini:

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

Di bahagian hadapan Vue, imej ini akhirnya akan dipaparkan pada halaman web. Saya rasa cara paling mudah ialah menyimpan imej dalam folder statik. Di kedai saya, saya akan mempunyai tindakan seperti ini:

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

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

    commit.commit('image_saved')
  }
}

Saya juga ingin mencuba kaedah lain untuk menyimpan imej dan memaparkannya di web. Bolehkah saya menyimpan imej terus di kedai Vuex?

Answer 1

Anda boleh menyimpan data imej dalam Vuex

Storan:

const state = {
  imgData: null
}

Dengan mengandaikan anda mendapat base64 daripada API, sila serahkan data mentah:

commit('SET_IMAGE_DATA', image);

Atau, jika anda mendapat ArrayBuffer, tukar dahulu:

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

^{Cari kaedah untuk menukar ArrayBuffer kepada base64di sini}

dan gunakannya dalam templat anda:

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