微信小程序（5）—

文章目录

一、普通下载图片
二、用户授权下载图片
三、图片文件流显示并下载

一、普通下载图片

实现功能：点击下载按钮，将图片保存到本地相册。

代码如下：

 //下载图片picDown(){wx.downloadFile({url: this.data.imgUrl,//图片的地址success:function(res){const tempFilePath = res.tempFilePath  //通过res中的tempFilePath 得到需要下载的图片地址wx.saveImageToPhotosAlbum({filePath: tempFilePath,  //设置下载图片的地址success:function(){}})}})},

按照官方文档，简单这样写即可，开发测试和发布测试时通常也都能正常下载。但是偶尔会遇到报错：errMsg: "saveImageToPhotosAlbum:fail auth deny"

二、用户授权下载图片

需要用户授权进行保存操作。（不明白为什么同一台手机有的时候需要授权，有的时候不需要授权呢？）而且授权是需要弹窗支持的。

完整代码如下：

  //下载图片picDown(){wx.downloadFile({url: this.data.imgUrl,//图片的地址success:function(res){const tempFilePath = res.tempFilePathwx.saveImageToPhotosAlbum({filePath: tempFilePath,  //设置下载图片的地址success:function(){wx.hideLoading()wx.showModal({title: '提示',content: '图片已保存到相册',showCancel: 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: '需要您授权保存到相册',showCancel: false,success: modalSuccess => {wx.openSetting({success(settingdata) {console.log("settingdata", settingdata)if (settingdata.authSetting['scope.writePhotosAlbum']) {wx.showModal({title: '提示',content: '获取权限成功,再次点击即可保存',showCancel: false,})} else {wx.showModal({title: '提示',content: '获取权限失败，将无法保存到相册哦~',showCancel: false,})}},fail(failData) {console.log("failData", failData)},complete(finishData) {console.log("finishData", finishData)}})}})}},complete(res) {wx.hideLoading()}})}})},

最后别忘了在微信小程序设置项目配置downloadFile合法域名中添加下载的https域名。

三、图片文件流显示并下载

有时请求接口后端返回的图片格式不是一个完整的url,也不是其他直接能显示的图片格式，而是直接一张图片，即返回为文件流的格式。

需要对这个数据进行如下处理：

wx.request({url: this.data.url,responseType: 'arraybuffer', //将数据转为类似二进制数组的格式success:res=>{//进行转码let url = 'data:image/png;base64,' + wx.arrayBufferToBase64(res.data)this.setData({imgUrl:url})}
})

图片途径已经转成已经base64,直接下载必然失败。

在原有图片下载的基础上，判断是否为base64，如果是则按照文件下载那样解码后下载，如果不是那么用普通下载即可。

  //判断base64并下载图片picDown() {var save = wx.getFileSystemManager();var number = Math.random();//判断是否为base64if( this.data.imgUrl.includes("base64")){  save.writeFile({filePath: wx.env.USER_DATA_PATH + '/test' + number + '.png',data: this.data.imgUrl.replace('data:image/png;base64,', ''),encoding: 'base64',success: res => {wx.saveImageToPhotosAlbum({ //保存为png格式到相册filePath: wx.env.USER_DATA_PATH + '/test' + number + '.png',success: function (res) {wx.hideLoading()wx.showToast({title: '保存成功',icon: 'success',duration: 2000, //提示的延迟时间，单位毫秒，默认：2500})},fail: function (err) {wx.hideLoading()}})},fail: err => {console.log(err)}})}else{wx.downloadFile({url: this.data.imgUrl,//图片的地址success:function(res){const tempFilePath = res.tempFilePathwx.saveImageToPhotosAlbum({filePath: tempFilePath,  //设置下载图片的地址success:function(){wx.hideLoading()wx.showToast({title: '保存成功',icon: 'success',duration: 2000, //提示的延迟时间，单位毫秒，默认：2500})},fail: function (err) {wx.hideLoading()}})}})}},

微信小程序（5）——下载图片相关推荐

微信小程序：下载图片列表
这里可以下载一张,也可以下载多张图片,不过是一张一张下载的 // 下载图片// 点击一键下载图片按钮DownloadImgList() {var downLoadList=[]this.data.im ...
微信小程序：修复图片音频全新升级带特效喝酒神器源码
这是一款全新升级带特效喝酒神器小游戏微信小程序源码小编发现很多喝酒神器小程序都不带特效和音效的感觉差了那么一点意思而且感觉也不炫酷所以小编今天给大家带来一款带特效,音效炫酷的喝酒神器该款神器由 ...
如何在微信小程序中下载APP？
如何在微信小程序中下载APP? 可能的方案官方api接口:--目前小程序官方未提供专门下载APP的接口:小程序目前是不允许将流量导出到APP之外,所以合理推断,该方案短期内并不可行. 通过web-v ...
微信小程序中高清图片替换加载策略
微信小程序中高清图片替换加载策略前言一.基本思想二.具体步骤 1.图片大小对比 2.代码流程总结前言随着微信的不断发展,微信小程序凭借着它用户基数大,无下载安装等优点开始逐渐替代传统app ...
微信小程序内拖动图片实现移动、放大、旋转
最近接到一个任务,在微信小程序内拖动图片组件实现移动.放大.旋转,并记录这些图片的移动位置,放大比例,旋转角度,在一个画布上生成一张图片,最后保存到手机相册. 我的具体实现思路是这样的:(文章底部留有 ...
小程序提交表单mysql_GitHub - kun19911227/minipro: 微信小程序提交带图片的表单
minipro 微信小程序提交带图片的表单目录说明 upload_images ├── pages │ ├── upload_info 提交表单 │ └── display_info 信息展示 ├─ ...
微信小程序中下载app的方法
微信小程序中下载app的方法因为微信小程序本身是不推荐引流到外部的,所以正规的方法其实都是被禁止掉的,大致方向是打开内部浏览器,进入应用宝下载页面(如果app接入应用宝),或者是通过右上角的在系统浏 ...
微信小程序怎么实现图片按住一角缩放、旋转、拖拽
微信小程序怎么实现图片按住一角缩放.旋转.拖拽图片一角可以加个小图片,按住来操作利用movable-view.movable-area 可以实现拖拽缩放.不好旋转是不是可以利用canvas绘图 ...
为什么微信小程序里的图片在电脑上显示在手机上不显示？
<image class='carousel' src="/images/图片301@2x.png"></image> 电脑上显示图片,但手机上是空白的 & ...
关于微信小程序不能显示图片
本人场景:wxml <image> 标签设置 src="../../images/中文名.png" 时出现 IOS 端显示没问题,而安卓端不显示图片的问题. 上网一查才 ...

微信小程序（5）——下载图片

文章目录

一、普通下载图片

二、用户授权下载图片

三、图片文件流显示并下载

微信小程序（5）——下载图片相关推荐

最新文章

热门文章