这是我的第一篇文章,写不好的地方希望各位伙伴可以指点和纠正,希望和大家一起进步,谢谢大家!不喜勿喷!
function save() {
let self = this;
wx.getSetting({
success: (res) => {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
self.saveImageToPhoto();
},
fail() {
wx.showModal({
title: '提示',
content: '若点击不授权,将无法使用保存图片功能',
cancelText: '不授权',
cancelColor: '#999',
confirmText: '授权',
confirmColor: '#f94218',
success(res) {
if (res.confirm) {
wx.openSetting()
} else if (res.cancel) {
}
}
})
}
})
} else {
self.saveImageToPhoto();
}
},
})
}
function saveImageToPhoto() {
let self = this;
wx.showLoading({
title: '努力生成中...',
});
wx.canvasToTempFilePath({
x: 0,
y: 0,
canvasId: 'myCanvas',
success(res) {
wx.hideLoading();
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showModal({
content: '图片已保存到相册了',
showCancel: false,
confirmText: '朕知道啦',
confirmColor: '#72B9C3',
success(res) {
if (res.confirm) {
console.log("用户点击确定");
}
}
})
}
});
},
fail(res) {
console.log(res);
}
})
}
1.第一张图片(因为业务需求需要将绘制在canvas上的图片裁剪,所以在网上找到了一个裁图插件 "image-cropper",插件很好用有很多裁图功能,可以满足很多需求,有需要的小伙伴可以自行百度 )

2. 第二张图片(点击保存到相册按钮)

3.第三张图片(弹出保存图片权限授权)

4.第四张图片(如果用户点击”拒绝“则弹出提示框,这里是因为如果用户点击”拒绝“后我们再点击”保存到相册“按钮后不会再调起授权权限的弹窗,所以需要这一步操作)

5.第五张图片(点击”授权“重新打开权限授权的页面)

6.第六张图片(我们就可以再次进行图片的保存)

7.第七张图片(最后,我们就可以在系统相册中去查找保存的图片)
