微信小程序实现将图片保存到手机相册

前言

图片保存到手机相册的功能相信大家一定都用过吧，今天教你用微信小程序实现这个好玩的小功能。

实现效果如下：

实现思路：

首先我们需要调用 wx.downloadFile 方法下载文件资源到本地，然后利用 wx.saveImageToPhotosAlbum 方法保存图片到系统相册，需要注意的是这样写很可能会因为没有权限而导致下载不了图片，所以我们最后还需要给接口一个调用失败的回调函数，以此来获取权限，最后这个小功能就实现啦。

源码如下：

wxml文件

<!-- 按钮触发事件 -->
<button bindtap="downloadImg">点击下载图片</button>

js文件

const app = getApp(); //获取app实例
Page({data: {modalType: false, //弹框默认不显示imgUrl: "https://s1.ax1x.com/2022/04/11/LV4c4J.jpg", //模拟图片},// 点击下载图片事件downloadImg() {wx.showLoading({title: '加载中...'});//wx.downloadFile方法：下载文件资源到本地wx.downloadFile({url: this.data.imgUrl, //图片地址success: function (res) {//wx.saveImageToPhotosAlbum方法：保存图片到系统相册wx.saveImageToPhotosAlbum({filePath: res.tempFilePath, //图片文件路径success: function (data) {wx.hideLoading(); //隐藏 loading 提示框wx.showModal({title: '提示',content: '保存成功',modalType: false,})},// 接口调用失败的回调函数fail: function (err) {if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {wx.showModal({title: '提示',content: '需要您授权保存相册',modalType: false,success: modalSuccess => {wx.openSetting({success(settingdata) {console.log("settingdata", settingdata)if (settingdata.authSetting['scope.writePhotosAlbum']) {wx.showModal({title: '提示',content: '获取权限成功,再次点击图片即可保存',modalType: false,})} else {wx.showModal({title: '提示',content: '获取权限失败，将无法保存到相册哦~',modalType: false,})}},fail(failData) {console.log("failData", failData)},complete(finishData) {console.log("finishData", finishData)}})}})}},complete(res) {wx.hideLoading(); //隐藏 loading 提示框}})}})}
})

有关于微信小程序如何实现图片预览，大家可移步博主另一篇文章（微信小程序实现图片预览）

微信小程序实现将图片保存到手机相册相关推荐

微信小程序Canvas绘制主页保存到手机相册
本篇文章适用于保存用户主页.海报等至手机相册,内容包含圆角头像.文字超出显示省略号.多行超出显示省略号!(整体代码放入最下方可直接复制查看) 话不多说上图页面如下保存相册之后如下整体分三部分来讲 ...
小程序canvas生成海报保存至手机相册
小程序canvas画图保存至手机相册 (1)可直接展示生成的海报 .因手机分辨率不同可能导致生成的海报会有细微差别,这里隐藏canvas海报,页面正常设置海报样式保存时保存隐藏的canvas海报 (2 ...
微信小程序点击图片保存到相册
小程序实现点击图片保存到相册温馨提示:小程序图片在本地保存成功后放到线上失效,应该是没有设置合法的文件下载域名 // 下载事件函数bindImage: function (e) {var url = ...
微信小程序长按图片保存至相册
效果图: 描述: 「长按图片」,是否授权保存图片or视频到相册,「授权成功」,点击「保存到相册」即可完成. 代码: wxml <image src="{{imgSrc}}" ...
微信小程序-长按图片保存到相册
首页需要通过 wx.getSetting 先查询一下用户是否授权了写入相册权限: 其次对于网络图片,可调用wx.downloadFile下载文件资源到本地: 然后非网络图片,可以调用wx.getIma ...
用canvas绘制微信小程序海报页面并保存相册-适用微信原生
微信小程序绘制海报并保存相册 tip:代码中使用的是uni的api 如果使用原生微信小程序开发,可以把uni更换成wx使用文章目录微信小程序绘制海报并保存相册前言一.分析需求二.准备数据三 ...
android可拖拽九宫格,微信小程序实现九宫格图片拖拽
(在真机上的效果就不演示了,是差不多的) 实现思路布局在这里运用到了微信小程序的moveable-area和moveable-view两个标签. moveable-area是可拖拽的区域,需要设置 ...
微信小程序canvas画图，保存页面为海报
目录思路 wxml与wxss 绘制相关js 宽高设置点击按钮后开始绘制绘制函数 echarts图表临时文件路径获取保存至相册相关js 用户点击保存图片按钮判断是否授权保存到相册保存至相册, ...
微信小程序内拖动图片实现移动、放大、旋转
最近接到一个任务,在微信小程序内拖动图片组件实现移动.放大.旋转,并记录这些图片的移动位置,放大比例,旋转角度,在一个画布上生成一张图片,最后保存到手机相册. 我的具体实现思路是这样的:(文章底部留有 ...
微信小程序如何把图片上传至服务器
微信小程序如何把图片上传至服务器前些日子接了个任务就是开发一个小程序,遇到了一个问题就是需要图片上传至服务器并保存记录,遵循着解决思路我们先从最开始入手 1:微信上传接口 2:服务器接收接口 3:保 ...

微信小程序实现将图片保存到手机相册

前言

实现思路：

源码如下：

微信小程序实现将图片保存到手机相册相关推荐

最新文章

热门文章