微信小程序之canvas绘图保存到手机系统相册

282 阅读2分钟

这是我的第一篇文章,写不好的地方希望各位伙伴可以指点和纠正,希望和大家一起进步,谢谢大家!不喜勿喷!

// 保存到相册按钮
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;
    // 打开Loading提示框
    wx.showLoading({
        title: '努力生成中...',
    });
    // 把当前画布指定区域的内容导出生成指定大小的图片【在draw()回调里使用该方法才能保证图片导出成功】 
    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.第七张图片(最后,我们就可以在系统相册中去查找保存的图片)