微信小程序图片保存到本地一次问题解决

简介: 最近接到一个小程序保存二维码到本地的需求,以保证用户分享进行推广。看看似简单的一个小需求,其实还是挺麻烦的,为大家分享下(这里项目使用了Taro小程序是一样的)。

步骤


查看文档发现是现成的,很简单。


代码如下


// 图片下载
async downloadImage() {
  try {
    /**
    * @param {String} src  网络图片地址
    */
    const { path } = Taro.getImageInfo({ src })
    // 保存到相册
    const saveRet = await Taro.saveImageToPhotosAlbum({ filePath: path })
    if(saveRet.errMsg == 'saveImageToPhotosAlbum:ok') {
      Taro.showToast({
        title: '图片保存成功'
      })
    }
  } catch (error) {
    console.log(error)
  }
}


感觉好像是完事了,但其实还早,这才刚刚开始,刺激的在后面。


授权


调用相册是需要用户授权的,用户授权了还好,要是没有授权(用户选择了拒绝),就不能再进行图片下载,且没有什么提示,用户体验极差,怎么办呢。



最好的办法还是对用户进行引导。如果用户选择了拒绝,当用户再次打开此页面的时候,那么我们将下载的按钮进行替换成授权相册。引导用户手动打开相册权限进行图片的下载。



贴上代码供各位看官参考


async openSetting() {
  // 打开设置(手动授权)
  const ret = await Taro.openSetting()
  if(ret.authSetting['scope.writePhotosAlbum']) {
    this.setState({
      writePhotosAlbum: true // 权限开启状态
    })
  }
}


兼容性


本以为这样就结束了,奈何QA同学又过来找,在个别安卓手机上下载不了,表现为点击保存没有任何反应(文件类型识别失败)。


发现其实是getImageInfo这个方法获取不到图片信息报错导致的,惊慌失措中寻找是否有替代方案。downloadFile是用来保存文件到本地的缓存中,存储临时地址。想到图片其实也是属于文件,尝试是否可以借助这个方法实现。


// 获取临时文件路径
  const filePath = `${wx.env.USER_DATA_PATH}/${Date.now()}.jpg`
  // 通过获取本地临时文件路径进行图片的保存,此文件路径是我们自己指定了文件类型,所以不会出现文件类型识别失败的情况。
  const { path } = await Taro.downloadFile({
    url,
    filePath // 强行指定文件类型(.jpg)
  })
  // 图片保存
  const saveRet = await Taro.saveImageToPhotosAlbum({
    filePath: path
  })
  if(saveRet.errMsg == 'saveImageToPhotosAlbum:ok') {
    Taro.showToast({
      title: '图片保存成功'
    })
    // 保存成功之后移除缓存释放机身空间
    let fileMgr = Taro.getFileSystemManager()
    fileMgr.unlink({ filePath })
  }


这样实现之后是可以的,正好避过了getImageInfo获取图片类型(.png|.jpg)不成功的情况,如果各位小伙伴也遇到类似的场景,可以尝试将保存的代码修改成上面这种,能避免一些不必要的问题,如果有更好的办法,也请告知,欢迎一起学习讨论。祝工作顺利!


参考




相关文章
|
4月前
|
小程序 开发者
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
59 0
|
1月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
598 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
2月前
|
小程序
小程序消除图片下边距的三个方法
小程序消除图片下边距的三个方法
49 11
|
1月前
|
算法 小程序 Java
java制作海报三:获取微信二维码详情,并改变大小,合成到海报(另一张图片)上
这篇文章介绍了如何使用Java获取微信小程序的二维码,并将其调整大小后合成到海报(另一张图片)上。
41 0
|
3月前
|
小程序 前端开发
|
3月前
|
运维 小程序 前端开发
小程序开发问题之在小程序中调用my.chooseImage接口让用户选择图片如何解决
小程序开发问题之在小程序中调用my.chooseImage接口让用户选择图片如何解决
|
4月前
|
小程序 前端开发
【非常全】微信小程序下载图片到相册,微信小程序自动获取分享图片到相册
【非常全】微信小程序下载图片到相册,微信小程序自动获取分享图片到相册
257 3
|
4月前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
409 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
46 0
|
4月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
153 0

热门文章

最新文章