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
}

मान लें कि आप 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);

ArrayBuffer से बेस 64 विधि यहाँ मिली

और इसे अपने टेम्पलेट में उपयोग करें:

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