微信 h5 中的 chooseImage 接口拿到 localId 后无法通过 img 标签显示图片

当前位置：点晴教程→知识管理交流 →『技术文档交流』

freeflydom

2023年6月8日 11:40 本文热度 507

最近的一个微信 h5 项目，用到了微信 jssdk 的 chooseImage 方法，遇到了坑，在这里记一下

需求是用户拍照或上传本地图片，先显示出来，然后再上传图片做其他的事情，弄的过程中发现，安卓可以使用 chooseImage 方法返回的 localId 显示图片，ios 显示不出图片

查了下，找到了解决方法：

ios 微信6.5.3版本开始支持开发者手动切换 WKWebview 和 UIWebview，使开发者可提前对 WKWebview 进行适配

WKWebview 不再支持通过使用 chooseImage api 返回的 localld ，如：”img src=wxLocalResource://50114659201332” 的方式预览图片。

在iOS微信6.5.3版本及之后的版本中，使用新增的 jsapi：getLocalImgData 拿到 LocalID 对应的图片base64编码后再在前端页面中显示

也就是说，在 ios 上，chooseImage 拿到图片的 localId 后，再使用 getLocalImgData 方法拿到 localId 对应的图片 base64

栗子：

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: (res) => {
    var localIds = res.localIds.toString(); // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
    this.imgUrl = localIds;
    if (isIos()) {
      wx.getLocalImgData({
        localId: localIds, // 图片的localID
        success: (res) => {
          this.imgUrl = res.localData // localData是图片的base64数据，可以用img标签显示
        },
      })
    }
  },
})

该文章在 2023/6/8 11:40:15 编辑过

关键字查询

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。