base64 또는 ArrayBuffer의 Vue 이미지

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
}

base64API에서 가져 온다고 가정 하고 원시 데이터를 커밋합니다.

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

^{여기에서 base64 메서드에 대한 ArrayBuffer를 찾았 습니다.}

템플릿에서 사용하십시오.

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