ภาพ Vue จาก base64 หรือ ArrayBuffer

Question

ฉันมีแบ็กเอนด์ขวดซึ่งส่งภาพไปยังส่วนหน้า vue ตามที่อธิบายไว้ที่นี่ :

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

ในส่วนหน้าของ vue ภาพควรจะปรากฏบนหน้าเว็บในที่สุด ฉันเดาว่าวิธีที่ง่ายที่สุดน่าจะเป็นการบันทึกรูปภาพในโฟลเดอร์แบบคงที่ ฉันจะมีการกระทำเช่นนี้ในร้านของฉัน:

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

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

    commit.commit('image_saved')
  }
}

ฉันยังเปิดกว้างสำหรับวิธีอื่นในการบันทึกภาพและแสดงผลบนหน้าเว็บ ฉันสามารถบันทึกภาพโดยตรงในร้านค้า vuex ได้หรือไม่?

Answer 1

คุณสามารถจัดเก็บข้อมูลภาพใน Vuex

เก็บ:

const state = {
  imgData: null
}

สมมติว่าคุณได้รับbase64จาก API ให้ส่งข้อมูลดิบ:

commit('SET_IMAGE_DATA', image);

หรือหากคุณได้รับให้ArrayBufferแปลงก่อน:

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 ถึงเมธอด base64 พบได้ที่นี่}

และใช้ในเทมเพลตของคุณ:

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