Ways to get image: from base64 or ArrayBuffer using Vue-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Ways to get image: from base64 or ArrayBuffer using Vue

P粉953231781 2023-11-06 15:34:13

596

I have a Flask backend that sends an image to the Vue frontend as described here:

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

In the Vue front-end, this image should eventually be displayed on the web page. I guess the easiest way is to save the images in a static folder. In my store, I would have an action like this:

const actions = { SOCKET_IMAGE (commit, image) { console.log("image received") /* 需要做什么来将图片保存在 'static/' 中？*/ commit.commit('image_saved') } }

I would also be happy to try other methods of saving images and rendering them on the web. Can I save images directly in the Vuex store?

P粉953231781

reply all (1)

P粉1988143722023-11-07 13:53:09 1 floor

You can store image data in Vuex

storage:

const state = { imgData: null }

Assuming you getbase64from the API, please submit the original data:

commit('SET_IMAGE_DATA', image);

Or, if you getArrayBuffer, please convert first:

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

^{Find the method of converting ArrayBuffer to base64 herehere}

and use it in your template: