미니 프로그램에서 base64 이미지를 보는 방법

미니 프로그램에서 base64 이미지를 보는 방법은 무엇인가요? 다음 기사에서는 WeChat 애플릿에서 base64 이미지를 미리 보는 방법을 소개하겠습니다. 도움이 되길 바랍니다!

1. 배경에서 전송되는 이미지는 base64 형식으로 표시하고 싶으면 ["data:image/PNG;base64," + data]를 사용하여 정상적으로 표시하세요. 그런 다음 WeChat API 인터페이스 PreviewImage를 호출하면 다음과 같은 많은 문제가 있습니다.

• windows 개발 도구 검은색 화면
• 일부 Android 모델은 표시할 수 없습니다.
• 콘솔 오류 등

두 번째로 문의한 결과 공식 답변. WeChat 공식은 URL 주소를 사용해야 하며 base64 형식이 지원되지 않음을 의미합니다. 다음은 공식 WeChat 답변입니다.

wx.previewImage API가 base64 이미지를 미리 보면 WeChat Open Community(qq.com | )

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

솔루션

아이디어 : 먼저 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链接列表
    })
  }
})

[관련 학습 권장사항: Mini 프로그램 개발 튜토리얼]

위 내용은 미니 프로그램에서 base64 이미지를 보는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!