取得影像的方式：從base64或ArrayBuffer中使用Vue

Question

我有一個Flask後端，根據這裡的描述，將一張圖片發送給Vue前端：

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

在Vue前端，最終應該會在網頁上顯示這張圖片。我猜最簡單的方法是將圖片保存在靜態資料夾中。在我的store中，我會有一個像這樣的action：

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

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

    commit.commit('image_saved')
  }
}

我也樂意嘗試其他儲存圖片並在網頁上渲染的方法。我能直接將圖片儲存在Vuex store嗎？

Answer 1

您可以將影像資料儲存在Vuex中

儲存：

const state = {
  imgData: null
}

假設您從API取得base64，請提交原始資料：

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的方法here}

並在您的模板中使用它：

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