小程式怎麼看base64圖片

青灯夜游
發布: 2021-12-13 10:11:32
轉載
5889 人瀏覽過

小程式怎麼看base64圖片?以下這篇文章為大家介紹一下微信小程式中預覽base64圖片的方法,希望對大家有幫助!

小程式怎麼看base64圖片

一、後台傳過來的圖片為base64格式的,顯示的話用【"data:image/PNG;base64," data】就可以正常顯示。然後在呼叫微信API介面previewImage卻有許多問題,如:

  • windows開發工具黑屏
  • 部分安卓機型無法顯示
  • 控制台報錯等

二、經過查詢,找到了官方的答案。微信官方的意思是需要用url位址,不支援base64格式,以下是微信官方回答:

wx.previewImage API 預覽base64圖片導致微信閃退?| 微信開放社群(qq.com )

https://developers.weixin.qq.com/community/develop/doc/00088c9e44c3d880597ab22b15bc00?highLine=wx.previewImage base64

小程式怎麼看base64圖片

解決方案

想法:先把base64當作暫存檔案存到本地,然後預覽,預覽結束時刪除臨時檔案

// 获取应用实例 const app = getApp() Page({ data: { //base64数据,由后台传过来 base64: '', //本机的临时文件路径 localImgUrl: '' }, onShow: function() { // 在这里删除临时文件 var localImgUrl = this.data.localImgUrl; if(localImgUrl) { var fs = wx.getFileSystemManager(); fs.unlinkSync(localImgUrl); fs.closeSync(); } }, //预览图片 onPreviewImage() { var base64 = "data:image/PNG;base64," + this.data.base64; var imgPath = wx.env.USER_DATA_PATH + '/e-invoice' + Date.parse(new Date()) + '.png'; var imageData = base64.replace(/^data:image\/\w+;base64,/, ""); var fs = wx.getFileSystemManager(); fs.writeFileSync(imgPath, imageData, "base64"); fs.close(); this.setData({ localImgUrl: imgPath }) wx.previewImage({ urls: [imgPath] // 需要预览的图片http链接列表 }) } })
登入後複製

【相關學習推薦:小程式開發教學

以上是小程式怎麼看base64圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!