小程序生成海报图片,或者原有的并下载,&&相册授权&&按钮拉起二次授权
这是自己做小程序生成推广海报,并保存到本地相册的方法,向后台发起请求,返回一个海报图片,下载保存到相册,
如果只是单纯的下载图片代码43行-63行就足够了
如果想直接保存到相册,则不要做downFile的处理,直接调用saveImageToPhotoAlbum,线上版本无法保存临时路径的图片
具体看代码:
//选中轮播图中的一个作为海报背景图。可自行实验,只是自己的总结 bindchange: function(a) { for (var t = this, o = a.detail.current, i = t.data.imgUrls, n = 0; n < i.length; n++) { var e = i[o].plogo; var title = i[o].title; t.setData({ imgcxs: e, title: title }); } t.setData({ tuhight: o,
//选中图片的id nowid:a.detail.currentItemId, }); }, //选中海报背景,拿到id后向后台发起请求,生成海报 bao: function() { var that = this; wx.showLoading({ title: "生成中", mask: true, }); //向后台发起请求, wx.request({ url: api.url.poster, method: "POST", data:{ uid: app.globalData.userInfo.id, postid:that.data.nowid, }, header: { 'content-type': 'application/x-www-form-urlencoded' }, success: function (res) { console.log(res) wx.hideLoading(); wx.showToast({ title: res.data.msg, icon: "none" }) //下载图片 //这里不能用wx.savefile()去保存,它不会自动保存在自己相册中的,只能用wx.saveImageToPhotosAlbum()调起相册 wx.downloadFile({ url: 后台返回图片的url(或者是网上的图片url), success: function(a) { //图片下载时的临时路径 var t = a.tempFilePath; //通过wx.saveImageToPhotoAlbum调起本地相册,并保存 wx.saveImageToPhotosAlbum({ //需要保存的临时文件路径 filePath: a.tempFilePath , success: function (a) { console.log(a); wx.showToast({ title: "保存成功", icon: "success", duration: 2e3, }) }, fail: function (err) { console.log(err) } }); }, fail:err=>{ console.log(err) } }) }
真机的时候发现了一个问题,saveImageToPhotosAlbum没有调动本地相册。
后来发现是没有授权的原因,所以利用wx.getSetting进行检测,没有授权,调起弹窗授权,当授权成功,使ruler变为true,使授权按钮消失,
onShow:function(){ var that=this wx.getSetting({ success(res) { if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success() {//这里是用户同意授权后的回调 that.setData({ ruler:true }) }, fail() {//这里是用户拒绝授权后的回调 // wx.showModal({ // title: '警告', // content: '授权失败,无法保存到相册', // }) that.setData({ ruler:false }) } }) } else {//用户已经授权过了 } } }) },
如果用户拒绝了授权,短时间内则不会在出现弹窗,所以,如果需要用户授权使用此功能的话,需要按钮授权,当授权成功,使ruler变为true,使授权按钮消失,也就是一共两个按钮作做处理
wxml:
<text bindtap="bao" wx:if="{{ruler}}">保存图片到相册</text>
<button open-type="openSetting" bindopensetting='handleSetting' class="xsACA" wx:else> <text bindtap="bao" >授权相册</text> </button>
handleSetting: function (e) { let that = this; // 对用户的设置进行判断,如果没有授权,即使用户返回到保存页面,显示的也是“去授权”按钮;同意授权之后才显示保存按钮 if (!e.detail.authSetting['scope.writePhotosAlbum']) { wx.showModal({ title: '警告', content: '若不打开授权,则无法将图片保存在相册中!', showCancel: false }) that.setData({ ruler: false }) } else { wx.showModal({ title: '提示', content: '您已成功授权相册', showCancel: false }) that.setData({ ruler: true }) } },
- 上一篇 »小程序的buffer转图片
- 下一篇 »小程序丨canvas内容自适应不同尺寸屏幕