Shulou(Shulou.com)06/02 Report--

This article is about how Mini Program views base64 images. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

First, the picture sent from the background is in base64 format, and if displayed, it can be displayed normally with [_ "data:image/PNG;base64," + data]. Then there are many problems when calling Wechat API API previewImage, such as:

Windows development tools black screen

Some Android models cannot be displayed.

Console error report, etc.

Second, after inquiry, the official answer was found. The official meaning of Wechat is that an url address is required. Base64 format is not supported. Here is the official answer of Wechat:

Wx.previewImage API Preview base64 Image causes Wechat to flash? | Wechat Open Community (qq.com)

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

Solution

Idea: first save base64 as a temporary file locally, then preview it, and delete the temporary file at the end of the preview

/ / get the application instance const app = getApp () Page ({data: {/ / base64 data. The temporary file path localImgUrl:''}, onShow: function () {/ / delete the temporary file var localImgUrl = this.data.localImgUrl; if (localImgUrl) {var fs = wx.getFileSystemManager (); fs.unlinkSync (localImgUrl) Fs.closeSync ();}}, / / Preview the picture onPreviewImage () {var base64 = _ "data:image/PNG;base64," + this.data.base64; var imgPath = wx.env.USER_DATA_PATH +'/ eFicco invoice' + Date.parse (new Date ()) + '.png'; var imageData = base64.replace (/ ^ data:image\ /\ Withfield Base64 Legend, ""); var fs = wx.getFileSystemManager () Fs.writeFileSync (imgPath, imageData, "base64"); fs.close (); this.setData ({localImgUrl: imgPath}) wx.previewImage ({urls: [imgPath] / / list of http links to be previewed)}) Thank you for reading! This is the end of the article on "how Mini Program views base64 pictures". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.