uniapp保存base64格式图片的方法首先第一要先获取用户的权限

saveAlbum(){//获取权限保存相册
uni.getSetting({//获取用户的当前设置
success:(res)=> {
// console.log("获取权限",res);
if(res.authSetting['scope.writePhotosAlbum']){//验证用户是否授权可以访问相册
this.saveImageToPhotosAlbum();
}else{
uni.authorize({//如果没有授权,向用户发起请求
scope: 'scope.writePhotosAlbum',
success:()=> {
this.saveImageToPhotosAlbum();
},
fail:()=>{
uni.showToast({
title:"请打开保存相册权限,再点击保存相册分享",
icon:"none",
duration:3000
});
setTimeout(()=>{
uni.openSetting({//调起客户端小程序设置界面,让用户开启访问相册
success:(res2)=> {
// console.log(res2.authSetting)
}
});
},3000);
}
})
}
}
})
},

第二步是保存的代码

代码里面都有清晰的注释可以看

${this.$u.guid(8)}这里我用的是uview的一个自动生成随机八位数唯一字段的js 也可以替换成你需要生成的文件名称 也可以是固定的名称

只不过保存第二次的时候图片名称不会变化

saveImageToPhotosAlbum(){
let base64=this.maskData.replace(/^data:image\/\w+;BASE64,/, "");//去掉data:image/png;base64,
let filePath=wx.env.USER_DATA_PATH + `/hym_pay${this.$u.guid(8)}_qrcode.png`;
uni.getFileSystemManager().writeFile({
filePath:filePath , //创建一个临时文件名
data: base64,   //写入的文本或二进制数据
encoding: 'base64', //写入当前文件的字符编码
success: res => {
uni.saveImageToPhotosAlbum({
filePath: filePath,
success: function(res2) {
uni.showToast({
title: '保存成功,请从相册选择再分享',
icon:"none",
duration:5000
})
},
fail: function(err) {
// console.log(err.errMsg);
}
})
},
fail: err => {
//console.log(err)
}
})
},

uniapp微信小程序保存base64格式图片的方法的更多相关文章

  1. 微信小程序开发——base64位图片显示问题

    前言: 目前小程序项目需要后端借口提供验证码图片,后端是以base64位返回的,按照H5的做法,前边拼上 data:image/png;base64, 应该就可以了,关键代码如下: H5: <i ...

  2. 微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签

    微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签 一.问题 报错信息: VM696:2 pages/user/user.wxss 中的本地资源 ...

  3. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  4. 微信小程序-显示外链图片 bug

    微信小程序-显示外链图片 bug 显示外链图片 bug 403 bug 禁止外链,未授权 https://httpstatuses.com/403 image component 图片.支持 JPG. ...

  5. 微信小程序自动去除input空格的方法

    当用户输入账号或者密码的时候,可能会有输入空格的情况,但是实际需要是不能够有空格的,所以我们要做一个去除空格,并且适应所有input的name参数的方法,下面请看源码: wxml: <input ...

  6. 微信小程序之base64图片如何预览与一键保存到本地相册?

    需求:由于后台服务器各方面的限制,现在服务器返回的图片是base64格式的,小程序端需要支持预览图片和多个图片一键下载功能 一.如何预览base64位图片? WXML页面:item.src的值是bas ...

  7. 【重点突破】—— UniApp微信小程序开发教程学习Three

    一.实战 HBuilderX:在微信小程序中运行页面,需要设置->安全 开启微信小程序服务端口,HBuilder工具->设置->配置程序路径 网络请求.模板语法.打开页面.页面传参 ...

  8. 【重点突破】—— UniApp 微信小程序开发官网学习One

    一.初步认识 uni-app官网:https://uniapp.dcloud.io/component/README HBuilderX官方IDE下载地址: http://www.dcloud.io/ ...

  9. 微信小程序开发之多图片上传+服务端接收

    前言: 业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存. 使用技术: 在这章中将会使用到微信小程序wx.uploadFile(Object ...

随机推荐

  1. WSL docker打通容器间通信和追加端口映射

    最近在docker中搭建一个服务,需要有多个容器通信.这里简单记录一下如何在容器间进行通信,同时说一下已经存在的容器如何追加端口映射. 增加网桥 容器间通信的目的是不适用IP而是使用容器名称进行网络通 ...

  2. ts 遇到的问题

    1. Property 'generatePdf' does not exist on type 'Element'. 问题:ts类型校验报错,使得编译失败 解决方法:将报错字段定义为any类型

  3. centos使用docker安装redis ,并设置外网访问

    拉取镜像 docker pull redis:4.0 在主机/data/redis/conf目录下新建redis.conf文件vim /data/redis/conf/redis.conf # Red ...

  4. Linux(centos)安装es(elasticsearch)

    前提条件--需要安装jdk环境,不同版本的es所对应的jdk版本要求不同,es6的使用jdk1.8可以 1.下载elasticsearch压缩包 下载地址:https://www.elastic.co ...

  5. 【LeetCode】946. Validate Stack Sequences 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 模拟过程 日期 题目地址:https://leetc ...

  6. 【LeetCode】343. Integer Break 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 数学解法 动态规划 日期 题目地址:https:// ...

  7. 关于wlw连接wordpress的问题

    前几天搭建好wordpress博客网站后,一直想和博客园一样,使用wlw发布文章.无奈遇到了难题,一直没有办法解决. 今天我看到一篇博客,遇到问题和我类似:尝试连接到您的日志时出错:基础连接已经关闭: ...

  8. Go语言核心36讲(新年彩蛋)--学习笔记

    新年彩蛋 | 完整版思考题答案 基础概念篇 Go 语言在多个工作区中查找依赖包的时候是以怎样的顺序进行的? 答:你设置的环境变量GOPATH的值决定了这个顺序.如果你在GOPATH中设置了多个工作区, ...

  9. [Guide]Google Python Style Guide

    扉页 项目主页 Google Style Guide Google 开源项目风格指南 - 中文版 背景 Python 是Google主要的脚本语言.这本风格指南主要包含的是针对python的编程准则. ...

  10. [C++]vector去除重复元素

    #include <iostream> #include <vector> #include <algorithm> #include <set> us ...