Comment afficher les images base64 dans le mini programme

Comment visualiser les images base64 dans le mini programme ? L'article suivant vous expliquera comment prévisualiser les images base64 dans l'applet WeChat. J'espère qu'il vous sera utile !

1. L'image transmise depuis l'arrière-plan est au format base64 Si elle est affichée, utilisez ["data:image/PNG;base64," + data] pour l'afficher normalement. Ensuite, lors de l'appel de l'interface de l'API WeChat previewImage, il y a de nombreux problèmes, tels que :

• écran noir de l'outil de développement Windows
• Certains modèles Android ne peuvent pas être affichés
• erreur de console, etc.

2. Après enquête, j'ai trouvé la réponse officielle. WeChat officiel signifie que vous devez utiliser l'adresse URL et que le format base64 n'est pas pris en charge. Voici la réponse officielle de WeChat :

L'API wx.previewImage prévisualise les images base64 provoque le crash de WeChat Open Community (qq.com ? )

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

Solution

Idée : Première base de sauvegarde 64 en tant que fichier temporaire. Local, puis aperçu, supprimez les fichiers temporaires à la fin de l'aperçu

// 获取应用实例
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链接列表
    })
  }
})

[Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!