前端imageBuffer設置圖片src(后端到前端直傳buffer)
本質為buffer轉base64
let bytes = new Uint8Array(imageBuffer.data); let data = ""; let len = bytes.byteLength; for (let i = 0; i < len; i++) { data += String.fromCharCode(bytes[i]); } image.src = "data:image/png;base64," + window.btoa(data);
微信小程序的url圖片到buffer再到base64
urlTobase64(url){ wx.request({ url:url, responseType: 'arraybuffer', //最關鍵的參數，設置返回的數據格式為arraybuffer success:res=>{ //把arraybuffer轉成base64 let base64 = wx.arrayBufferToBase64(res.data); //不加上這串字符，在頁面無法顯示的哦 base64 = 'data:image/jpeg;base64,' + base64 //打印出base64字符串，可復制到網頁校驗一下是否是你選擇的原圖片呢 console.log(base64) } }) }
=======下面一個例子,通過建立小程序雲函數,再雲調用,獲取小程序碼,
1.建立雲函數:unlimitQR (3個文件)
index.js內容--其他保持默認就行
// 雲函數入口文件 const cloud = require('wx-server-sdk') cloud.init() // 雲函數入口函數 exports.main = async (event, context) => { const wxContext = cloud.getWXContext(); try { const result = await cloud.openapi.wxacode.getUnlimited({ scene: 'a=1' }) console.log(result); return result } catch (err) { console.log(err) return err } }
2.在隨便一個頁面測試 雲函數,雲調用下.
let that = this; wx.cloud.callFunction({ // 需調用的雲函數名 name: 'unlimitQR', // 傳給雲函數的參數 (具體要傳字符傳還是json 要看小程序手冊) data: { a: 12, b: 19, }, // 成功回調 complete(res) { let buffer = res.result.buffer; console.log(buffer); const base64 = wx.arrayBufferToBase64(buffer) let bb = "data:image/png;base64,"+base64; that.setData({bb:bb}); } })
把bb字符串設置到image標簽的src上.
轉:
https://blog.csdn.net/qq_36875339/article/details/81086205 (小程序圖片轉Base64，方法總結)
https://blog.csdn.net/u010081689/article/details/51088068 (node使用buffer生成圖片)
https://www.cnblogs.com/brainworld/p/8330334.html (前端imageBuffer設置圖片src)