Imagem Vue de base64 ou ArrayBuffer
Nov 27 2020
Eu tenho um back-end de flask, que envia uma imagem para o front-end vue conforme descrito aqui :
with open('my_image_file.jpg', 'rb') as f:
image_data = f.read()
emit('IMAGE', {'image_data': image_data})
No frontend do vue, a imagem deve ser exibida na página da web. Eu acho que a maneira mais fácil seria salvar a imagem de alguma forma na pasta estática. Eu teria uma ação como esta em minha loja:
const actions = {
SOCKET_IMAGE (commit, image) {
console.log("image received")
/* What needs to be done to save image in 'static/' ?*/
commit.commit('image_saved')
}
}
Também estou aberto a maneiras alternativas de salvar a imagem e renderizá-la na página da web. Posso salvar a imagem diretamente na loja vuex?
Respostas
1 Dan Nov 28 2020 at 01:23
Você pode armazenar os dados da imagem no Vuex
Loja:
const state = {
imgData: null
}
Supondo que você esteja obtendo base64
da API, confirme os dados brutos:
commit('SET_IMAGE_DATA', image);
Ou, se você estiver obtendo um ArrayBuffer
, converta-o primeiro:
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 para o método base64 encontrado aqui
E use-o em seu modelo:
<template>
<div>
<img :src="'data:image/png;base64,' + $store.state.imgData" />
</div>
</template>
O que significa um erro “Não é possível encontrar o símbolo” ou “Não é possível resolver o símbolo”?
George Harrison ficou chateado por suas letras de 'Hurdy Gurdy Man' de Donovan não terem sido usadas