微信小程序base64图片保存到手机相册
问题:base64图片不能直接用wx.saveImageToPhotosAlbum保存到手机相册
解决:
先用fs.writeFile写入本地文件,再wx.saveImageToPhotosAlbum保存到手机相册
saveimg:function(){
    var _this=this
    //获取文件管理器对象
    const fs = wx.getFileSystemManager()
    //文件保存路径
    const Imgpath = wx.env.USER_DATA_PATH + '/qrcodeImg' + '.png'
    //_this.data.imgsrc   base64图片文件
    let imageSrc = _this.data.imgsrc.replace(/^data:image\/\w+;base64,/, '')
    //写入本地文件
    fs.writeFile({
      filePath: Imgpath,
      data: imageSrc,
      encoding: 'base64',
      success (res) {
        console.log(res)
        //保存到手机相册
        wx.saveImageToPhotosAlbum({
          filePath: Imgpath,
          success(res) {
            console.log(res)
            wx.showToast({
              title: '保存成功',
              icon: 'success'
            })
          },
          fail:function(err){
            console.log("失败了")
            console.log(err)
          }
        })
      }
    })
  },
存储的话上面就可以实现了,下面是如果需要,删除文件的方法
项目中有遇到过,因为接口返回的画海报的图片是base64的图片,需要先存为本地文件才可以画图,canvas画完海报素材还在临时文件中,不一会就满了,这时候就需要将临时文件中不需要的文件删除了,就用到如下方法:
Object wx.env
小程序环境变量对象
wx.env.USER_DATA_PATH
文件系统中的用户目录路径
let fs = wx.getFileSystemManager()
//获取文件 Stats 对象
fs.stat({
  // `${}` 是es6中新增的字符串方法
  // ` 返单引号
  path: `${wx.env.USER_DATA_PATH}`,
  recursive: true,
  success: res => {
    //获取到stats对象
    //Object.keys(要返回其枚举自身属性的对象)  返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致
    Object.keys(res.stats).forEach(path => {
      var stats = res.stats[path]
      //删除指定路径的文件
        fs.unlink({
          filePath:`${wx.env.USER_DATA_PATH}`+stats.path,
          success:function(res){
            //删除成功
          },
          fail:function(res){
            //删除失败
          }
        })
    })
  },
fail:res=>{
//失败
}
})
获取的stats对象:

Object.keys(res.stats):

微信小程序base64图片保存到手机相册的更多相关文章
- 微信小程序 base64 图片 canvas 画布 drawImage 实现
		在微信小程序中 canvas drawImage API 传入的第一个参数是 imageResource 图片资源路径,这个参数通常由从相册选择图片 wx.chooseImage 或 wx.getIm ... 
- 微信小程序 base64图片在canvas上画图
		上代码 wxml <canvas canvas-id="myCanvas" style="width:400px;height:400px;">&l ... 
- 微信小程序裁剪图片成圆形
		代码地址如下:http://www.demodashi.com/demo/14453.html 前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在gith ... 
- 微信小程序动态生成保存二维码
		起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class ... 
- 微信小程序实现图片是上传、预览功能
		本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ... 
- 微信小程序点击保存图片到本地相册——踩坑
		在微信小程序中要保存图片到本地相册,需要获取相册权限. 总之整个功能实现下来需要如下几个小程序的API:wx.getSetting,wx.authorize,wx.openSetting,wx.dow ... 
- 小程序base64图片格式保存至手机相册
		// 保存图片至相册 saveImg() { //获取文件管理器对象 const fs = wx.getFileSystemManager() //文件保存路径 const Imgpath = wx. ... 
- 微信小程序之图片base64解码
		不知道大家在做微信小程序的时候遇到base64解码的问题,我之前在做微信小程序的时候遇到base64解析图片一直有问题,所以在这里把遇到的问题和解决方案在这里记录一下: 在平时的项目中我们是直接用ba ... 
- 微信小程序  wx.uploadFile在安卓手机上面the same task is working问题解决
		微信小程序上传图片的时候,如果是多图片上传,一般都是直接用一个循环进行wx.uploadFile 这个在电脑上面测试与苹果手机上面都不会有什么问题 但当用安卓测试的时候,你会发现小程序会提示一个the ... 
随机推荐
- Jenkins安全加固
			1.jenkins未授权访问 描述 jenkins不当配置可导致未授权访问管理控制台,可以通过脚本命令行执行系统命令.通过该漏洞,可以后台管理服务,通过脚本命令行功能执行系统命令,如反弹shell,w ... 
- 计算机网络-4-8-外部网关协议BGP
			外部网关协议BGP 1989年,公布了新的外部网关协议BGP(边界网关协议),我们目前使用最多的版本是BGP-4(但仍然是起草方案[RFC 4271]),简写为BGP. 在不同的自治系统AS中之间的路 ... 
- tomcat下部署两个工程时,只有一个可以访问,另一个出现404错误,该如何解决
			tomcat下部署两个工程时,只有一个可以访问,另一个出现404错误,该如何解决 在开发新项目的时候,有时候为了省时,直接把曾经做过的项目工程A拷贝成改名为B工程,然后再在B工程上进行功能的开发, 此 ... 
- isEmpty 和 isBlank
			<org.apache.commons.lang3.StringUtils> isEmpty系列 StringUtils.isEmpty() ========> StringUtil ... 
- 【Java笔记】Java分包问题
			这个图讲的很清晰,转自-http://www.bubuko.com/infodetail-2219664.html 
- 「ARC096C」Everything on It
			Solution 容斥,钦定 \(i\) 个数 \(\leq 1\) 次. \[Ans=\sum_{i=0}^n (-1)^i\binom{n}{i}F(i) \] 其中 \(F(i)\) 表示有 \ ... 
- RabbitMQ学习笔记三:Java实现RabbitMQ之与Spring集成
			搭建好maven项目环境,加入RabbitMQ依赖包 <dependency> <groupId>org.springframework.amqp</groupId> ... 
- Interval Bound Propagation (IBP)
			目录 概 主要内容 IBP CROWN CROWN-IBP 训练的技巧 写在最后 代码 Gowal S., Dvijotham K., Stanforth R., Bunel R., Qin C., ... 
- 对vector和map容器的删除元素操作
			/** * 删除头部元素 * 切割map到指定的个数 * @param map * @param i * @return */ map<int, Rect> PublicCardFrame ... 
- web服务之nginx部署
			本期内容概要 了解web服务 Nginx和Apache的对比 部署Nginx 内容详细 1.什么是web服务 Web服务是一种服务导向架构的技术,通过标准的Web协议提供服务,目的是保证不同平台的应用 ... 
