ミニプログラムでbase64画像を表示する方法

ミニ プログラムで Base64 画像を表示するにはどうすればよいですか?次の記事では、WeChat アプレットで Base64 画像をプレビューする方法を紹介します。

1. 背景から渡された画像は、base64 形式です。表示するには、["data:image/PNG;base64," data##] を使用します。 #].は正常に表示できます。その後、WeChat API インターフェイスのプレビュー画像を呼び出すと、次のような多くの問題が発生します。

Windows 開発ツールの黒い画面
• 一部の Android モデルでは表示できない
• コンソール エラー, etc.

2. 問い合わせたところ、正式な回答が見つかりました。 WeChat 公式は、URL アドレスを使用する必要があり、base64 形式はサポートされていないことを意味します。次は WeChat の公式回答です:

wx.previewImage API Base64 画像をプレビューすると WeChat がクラッシュしますか? | WeChat Openコミュニティ (qq.com )

https://developers.weixin.qq.com/community/develop/doc/00088c9e44c3d880597ab22b15bc00?highLine=wx.previewImage 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 中国語 Web サイトの他の関連記事を参照してください。