Base64 या ArrayBuffer से Vue की छवि
Nov 27 2020
मेरे पास एक फ्लास्क बैकएंड है, जो यहां वर्णित के रूप में एक दृश्य दृश्यपटल पर भेजता है :
with open('my_image_file.jpg', 'rb') as f:
image_data = f.read()
emit('IMAGE', {'image_data': image_data})
Vue frontend पर, छवि को अंततः वेबपेज पर दिखाया जाना चाहिए। मुझे लगता है कि सबसे आसान तरीका यह होगा कि किसी भी तरह से स्टैटिक फोल्डर में इमेज सेव हो जाए। मेरे स्टोर में इस तरह की कार्रवाई होगी:
const actions = {
SOCKET_IMAGE (commit, image) {
console.log("image received")
/* What needs to be done to save image in 'static/' ?*/
commit.commit('image_saved')
}
}
मैं छवि को बचाने और इसे वेबपेज पर रेंडर करने के वैकल्पिक तरीकों के लिए भी खुला हूं। क्या मैं सीधे वीयूएक्स स्टोर में इमेज सेव कर सकता हूं?
जवाब
1 Dan Nov 28 2020 at 01:23
आप छवि डेटा को Vuex में संग्रहीत कर सकते हैं
दुकान:
const state = {
imgData: null
}
मान लें कि आप base64
API से प्राप्त कर रहे हैं , तो कच्चे डेटा के लिए प्रतिबद्ध करें:
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 से बेस 64 विधि यहाँ मिली
और इसे अपने टेम्पलेट में उपयोग करें:
<template>
<div>
<img :src="'data:image/png;base64,' + $store.state.imgData" />
</div>
</template>