项目开发过程中,需要用户将自己的二维码推广图片保存到手机相册,第一时间考虑使用canvas
画布来生成相关海报图片,用小程序api
保存到相册,因保存的图片上面带有个人相关动态参数信息,为减少前端加载时间,后改变为后端生成图片,前端调用接口方式保存。
1、wxml代码:
<button type="button" bindtap="saveUserQrcode">保存为图片</button>
2、js代码:
/**
* 保存二维码推广图片 检查是否授权
*/
saveUserQrcode: function() {
let that = this;
wx.showToast({
icon: 'loading',
title: '正在保存图片',
duration: 1000
})
//是否授权相册
wx.getSetting({
success(res) {
if (res.authSetting['scope.writePhotosAlbum']) {
that.savePhoto();
} else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
that.savePhoto();
},
fail() {
common.showToast('');
wx.showToast({
title: '您没有授权,无法保存到相册',
icon: "none"
})
}
})
} else {
wx.openSetting({
success(res) {
if (res.authSetting['scope.writePhotosAlbum']) {
that.savePhoto();
} else {
wx.showToast({
title: '您没有授权,无法保存到相册',
icon: "none"
})
}
}
})
}
}
})
},
/**
* 调用图片接口 返回base64
*/
savePhoto: function() {
let that = this;
let url = 接口地址;
let header = { 'Authorization': 'Bearer ' + token, 'content-type': 'application/x-www-form-urlencoded' };
let data = { 'userId': 123 };
common.WechatRequest(url, data, header, 'GET', 'json', 'text', res => {
if (res.data.code == 200) {
let imgSrc = res.data.data; // 此处接口返回为base64 不带base64图片头(data:image/jpg;base64,) 如返回图片头需要截取
let save = wx.getFileSystemManager();
let number = Math.random();
save.writeFile({
filePath: wx.env.USER_DATA_PATH + '/test' + number + '.jpg',
data: imgSrc,
encoding: 'base64',
success: res => {
wx.saveImageToPhotosAlbum({
filePath: wx.env.USER_DATA_PATH + '/test' + number + '.jpg',
success: function (res) {
wx.showToast({
title: '保存到相册成功',
icon: "success",
duration: 1500
})
}
});
},
fail: function (res) {
if (res.errMsg === "saveImageToPhotosAlbum:fail:auth denied") {
wx.openSetting({
success(settingdata) {
if (settingdata.authSetting["scope.writePhotosAlbum"]) {
console.log("获取权限成功,再次点击图片保存到相册")
} else {
console.log("获取权限失败")
}
}
})
}
}
});
} else if (res.data.code == 400) {
common.showToast(res.data.message);
return false;
} else {
common.showToast('');
wx.showToast({
title: '二维码保存失败',
icon: "none"
})
return false;
}
wx.hideLoading();
}, null, null);
}
备注:common.WechatRequest
方法为自定义封装的wx.request
请求,使用时替换即可;