Hình ảnh Vue từ base64 hoặc ArrayBuffer

Question

Tôi có một chương trình phụ trợ bình, gửi một hình ảnh đến giao diện người dùng vue như được mô tả ở đây :

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

Trên giao diện người dùng vue, hình ảnh cuối cùng sẽ được hiển thị trên trang web. Tôi đoán cách dễ nhất là bằng cách nào đó lưu hình ảnh trong Thư mục tĩnh. Tôi sẽ có một hành động như thế này trong cửa hàng của mình:

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

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

    commit.commit('image_saved')
  }
}

Tôi cũng sẵn sàng tìm các cách thay thế để lưu hình ảnh và hiển thị hình ảnh trên trang web. Tôi có thể lưu hình ảnh trực tiếp trong cửa hàng vuex không?

Answer 1

Bạn có thể lưu trữ dữ liệu hình ảnh trong Vuex

Cửa hàng:

const state = {
  imgData: null
}

Giả sử bạn nhận được base64từ API, hãy xác nhận dữ liệu thô:

commit('SET_IMAGE_DATA', image);

Hoặc, nếu bạn nhận được ArrayBuffer, hãy chuyển đổi nó trước:

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

^{Phương thức ArrayBuffer to base64 được tìm thấy tại đây}

Và sử dụng nó trong mẫu của bạn:

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