微信小程序点击按钮,将图片下载到本地

前言:

最近在公司完成一个小程序的时候需要实现一个功能:点击按钮获取用户相册权限,将图片下载到用户本地相册,经过了好几次的尝试最终算是实现了。将总结的经验在这里分享给小伙伴们。

实现方式:

//.wxml文件
<view class="canvas-box">
//注意:一定要添加:type="2d"<canvas id="posterCanvas"canvas-id="posterCanvas" type="2d"></canvas><view class="upload_btn" bindtap="onSaveSuccess"></view>
</view>
 //.js文件data: {urlSrc: "",},
// 保存图片onSaveSuccess() {const query = wx.createSelectorQuery().in(this);query.select("#posterCanvas").fields({ node: true, size: true }).exec((res) => {if (res[0] && res[0].node) {const canvas = res[0].node;// 将 canvas 内容导出为临时文件wx.canvasToTempFilePath({canvas,success: (res) => {if (res.tempFilePath) {this.setData({urlSrc: res.tempFilePath,});this.saveCard(res.tempFilePath);} else {wx.showToast({title: "导出失败,请重试",icon: "none",});}},fail: (err) => {wx.showToast({title: "导出失败,请重试",icon: "none",});},});} else {wx.showToast({title: "未找到 canvas 节点",icon: "none",});}});},saveCard: function (img) {let that = this;var imgSrc = img;//获取相册授权wx.getSetting({success(res) {if (!res.authSetting["scope.writePhotosAlbum"]) {wx.authorize({scope: "scope.writePhotosAlbum",success() {that.img(imgSrc);},});} else {that.img(imgSrc);}},});},img: function (imgSrc) {var imgSrc = imgSrc;// wx.downloadFile({//   url: imgSrc,//   success: function (res) {wx.saveImageToPhotosAlbum({filePath: imgSrc,success: function (data) {wx.showToast({title: "保存成功",duration: 2000,});},fail: function (err) {if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {wx.openSetting({success(settingdata) {if (settingdata.authSetting["scope.writePhotosAlbum"]) {wx.showToast({title: "图片已保存",icon: "none",duration: 2000,});console.log("获取权限成功,给出再次点击图片保存到相册的提示。");} else {console.log("获取权限失败,给出不给权限就无法正常使用的提示");}},});}},});//   },//   fail: function (err) {//     console.log(err, "进入wx.downloadFile错误分支");//   },// });},

注意事项:
不使用wx.downloadFile方法的原因是:使用 wx.canvasToTempFilePath方法将会导出一个http://temp....png的图片,使用wx.downloadFile方法将会报错:downloadFile:fail url not in domain list,关于解决这个报错请看我的另一篇博客:解决微信小程序下载图片报错:downloadFile:fail url not in domain list。众所周知,微信公众平台的downloadFile合法域名只能配置以https://开头的域名,既然已经获得了这个文件地址就可以直接调用 wx.saveImageToPhotosAlbum方法,将其直接保存在用户本地相册

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/897211.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据仓库为什么要分层

数据仓库分层架构是数据仓库设计中的一个重要概念&#xff0c;其主要目的是为了更好地组织和管理数据&#xff0c;提高数据仓库的可维护性、可扩展性和性能。分层架构将数据仓库划分为多个层次&#xff0c;每个层次都有其特定的职责和功能。以下是数据仓库分层的主要原因和好处…

selenium库

一、什么是selenium库&#xff1f; selenim是一个用于Web应用程序自动化测试工具&#xff0c;selenium测试直接运行在浏览器中 像真正的用户在操作一样&#xff0c;驱动浏览器执行特定的动作&#xff0c;如点击&#xff0c;下拉等操作 二、selenium在爬虫中的应用 获取动态…

python从入门到精通(二十四):python爬虫实现登录功能

这里写目录标题 requests实现登录功能selenium实现登录功能 requests实现登录功能 使用 requests 库结合会话&#xff08;Session&#xff09;来尝试登录。不过豆瓣有反爬虫机制&#xff0c;这种方式可能会受到验证码等因素的限制 import requests import re# 豆瓣登录页面 l…

十七、从0开始卷出一个新项目之瑞萨RZN2L定时器(GPT)+DMA生成PWM的运动控制

一、概述 嵌入式科普(34)通过对比看透DMA的本质 分享瑞萨RZN2L使用DMA生成PWM的运动控制的例程源码 rzn2l必要的外设资源&#xff1a; rzn2l拥有32-bit timer General PWM Timer (GPT) with 18 channels CPU、GPT最高频率400Mhz DMAC0 and DMAC1 8 channels 8 channels 还…

MR的环形缓冲区(底层)

MapReduce的大致流程&#xff1a; 1、HDFS读取数据&#xff1b; 2、按照规则进行分片&#xff0c;形成若干个spilt&#xff1b; 3、进行Map 4、打上分区标签&#xff08;patition&#xff09; 5、数据入环形缓冲区&#xff08;KVbuffer&#xff09; 6、原地排序&#xff…

解锁STM32外设:开启嵌入式开发新世界

✨✨✨这里是小韩学长yyds的BLOG(喜欢作者的点个关注吧) ✨✨✨想要了解更多内容可以访问我的主页 小韩学长yyds-CSDN博客 目录 探索 STM32 强大的外设家族 初窥门径&#xff1a;STM32 外设开发基础 开发方式与工具 外设配置基础步骤 深入剖析&#xff1a;常见外设应用实例…

大模型AI平台DeepSeek 眼中的SQL2API平台:QuickAPI、dbapi 和 Magic API 介绍与对比

目录 1 QuickAPI 介绍 2 dbapi 介绍 3 Magic API 介绍 4 简单对比 5 总结 统一数据服务平台是一种低代码的方式&#xff0c;实现一般是通过SQL能直接生成数据API&#xff0c;同时能对产生的数据API进行全生命周期的管理&#xff0c;典型的SQL2API的实现模式。 以下是针对…

人工智能之数学基础:对线性代数中逆矩阵的思考?

本文重点 逆矩阵是线性代数中的一个重要概念,它在线性方程组、矩阵方程、动态系统、密码学、经济学和金融学以及计算机图形学等领域都有广泛的应用。通过了解逆矩阵的定义、性质、计算方法和应用,我们可以更好地理解和应用线性代数知识,解决各种实际问题。 关于逆矩阵的思…

[傻瓜式教学]如何将MathType公式编辑器内嵌到WPS工具栏中

[傻瓜式教学]如何将MathType公式编辑器内嵌到WPS工具栏中 将MathType公式编辑器内嵌到WPS工具栏中 下载好所需文件 我用夸克网盘分享了「mathtype安装教程超简单易上手.zip」&#xff0c;点击链接即可保存。打开「夸克APP」 链接&#xff1a;https://pan.quark.cn/s/4726c684…

WPF框架---MvvmLight介绍

目录 1. MvvmLight 框架准备 2. MvvmLight 中的相关基类 3. MvvmLight 中的数据绑定与通知 a. 核心功能 b. 关键方法与属性 c. 完整示例 d. 高级用法 4. MvvmLight 中的命令对象 a. 命令对象的作用 b. 核心接口&#xff1a;ICommand c. MvvmLight 中的 RelayCommand…

【Linux】线程同步与互斥

线程同步与互斥 一.线程互斥1.互斥相关概念2.互斥锁 Mutex3.互斥锁接口4.互斥锁实现原理5.互斥锁封装 二.线程同步1.同步相关概念2.条件变量 Condition Variable3.条件变量接口4.条件变量封装5.信号量 Semaphore6.信号量接口7.信号量封装8.生产者 - 消费者模型1.基于 Blocking …

URIError: URI malformed

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》 &#x1f35a; 蓝桥云课签约作者、…

linux c++11 gcc4 环境编译安装googletest/gtest v1.10

c11对应googletest/gtest 经过测试&#xff0c;c11对应版本是googletest v1.10.x 编译安装 编译环境 sudo apt-get update sudo apt-get install -y build-essential cmake下载或git clone代码 git clone https://github.com/google/googletest.git cd googletest git che…

鸿蒙与DeepSeek深度整合:构建下一代智能操作系统生态

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 https://www.captainbed.cn/north 目录 技术融合背景与价值鸿蒙分布式架构解析DeepSeek技术体系剖析核心整合架构设计智能调度系统实现…

极狐GitLab 17.9 正式发布,40+ DevSecOps 重点功能解读【二】

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 学习极狐GitLab 的相关资料&#xff1a; 极狐GitLab 官网极狐…

LeetCode - 28 找出字符串中第一个匹配项的下标

题目来源 28. 找出字符串中第一个匹配项的下标 - 力扣&#xff08;LeetCode&#xff09; 题目解析 暴力解法 本题如果采用暴力解法的话&#xff0c;可以定义两个指针 i&#xff0c;j&#xff0c;其中 i 指针用于扫描 S&#xff08;haystack&#xff09;串&#xff0c;j 指针…

Spring Boot 异步编程

文章目录 一、异步方法的使用1. 开启异步支持2. 定义异步方法3. 调用异步方法踩坑记录心得体会 二、线程池配置1. 自定义线程池2. 使用自定义线程池踩坑记录心得体会 三、异步任务的监控与管理1. 日志记录2. 异常处理3. 线程池监控踩坑记录心得体会 在现代应用程序开发中&#…

0.大模型开发知识点需求综述

文章目录 一、机器学习与深度学习基础二、自然语言处理&#xff08;NLP&#xff09;基础三、大模型架构四、训练优化技术五、数据处理与预处理六、分布式训练与并行化策略七、微调方法与参数高效微调八、训练框架、工具与自动化流程九、评估与部署十、前沿技术与未来趋势 已更新…

docker目录挂载与卷映射的区别

在 Docker 中&#xff0c;目录挂载&#xff08;Bind Mount&#xff09;和卷映射&#xff08;Volume Mount&#xff09;的命令语法差异主要体现在路径格式上&#xff0c;具体表现为是否以斜杠&#xff08;/&#xff09;开头。以下是两者的核心区别及使用场景的总结&#xff1a; …

[Java基础-线程篇]7_线程设计模式与总结

摘要&#xff1a;懒汉单例模式怎么变得线程安全&#xff1f;Master-Worker归并模式&#xff0c;工作窃取算法。Java线程相关源码使用了什么设计模式&#xff1f; 资料引用&#xff1a;《Java高并发核心编程卷2》 目录 线程安全的单例模式 Master-Worker模式 工作窃取算法 …