Möglichkeiten, ein Bild zu erhalten: von Base64 oder ArrayBuffer mit Vue

Question

Ich habe ein Flask-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 dieses Bild schließlich auf der Webseite angezeigt werden. Ich denke, der einfachste Weg ist, die Bilder in einem statischen Ordner zu speichern. In meinem Laden würde ich eine Aktion wie diese durchführen:

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

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

    commit.commit('image_saved')
  }
}

Ich würde auch gerne andere Methoden zum Speichern und Rendern von Bildern im Web ausprobieren. Kann ich Bilder direkt im Vuex Store speichern?

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>