微信小程序生成图片保存到相册以及分享给好友

这个功能我研究了一天半,最开始的头疼到后面成功实现,其中艰辛不言而喻,值得记录一下,经常写博客后,会发现自己在遇到问题和技术的时候就会习惯性的写博客,这是一个好习惯

言归正传

html添加canvas标签

  

js:

在页面初始化时进行画布展示

onShow() {
            const ctx = wx.createCanvasContext('myCanvas')
            ctx.drawImage(this.shareImage, 0, 0, 325, 450) //图片背景图
            ctx.save();
            //绘制头像
            ctx.arc(105, 151, 20, 0, 2 * Math.PI);
            ctx.drawImage(this.headImg, 130, 40, 70, 70);//根据微信getUserInfo接口获取到用户头像
            // 圆环
            ctx.beginPath();//开始绘制
            ctx.arc(166, 76, 35, 0, 3 * Math.PI);
            ctx.strokeStyle = "#fff";//将线条颜色设置为白色
            ctx.lineWidth = 3.0;
            ctx.stroke();// 方法默认颜色是黑色(如果没有上面一行,则会是黑色)。

            //绘制用户昵称
            ctx.arc(100, 150, 20, 0, 2 * Math.PI);//显示在最上层
            ctx.setTextAlign('center')
            ctx.setFillStyle('#fff')
            ctx.setFontSize(20)
            ctx.fillText(this.name, 170, 150)//用户昵称
            /*绘制二维码*/
            ctx.arc(130, 140, 20, 0, 2 * Math.PI);
            ctx.drawImage(this.erweima, 100, 180, 140, 140);
            ctx.save()
            //绘制扫描二维码即可开通
            ctx.arc(100, 130, 20, 0, 2 * Math.PI);//显示在最上层
            ctx.setTextAlign('center')
            ctx.setFillStyle('#fff')
            ctx.setFontSize(20)
            ctx.fillText(this.texta, 170, 390)//扫描二维码即可开通
            //绘制成为见习萌主哦
            ctx.arc(100, 140, 20, 0, 2 * Math.PI);//显示在最上层
            ctx.setTextAlign('center')
            ctx.setFillStyle('#fff')
            ctx.setFontSize(20)
            ctx.fillText(this.texta1, 175, 425)//成为见习萌主哦
            // 保留上一次的绘制结果
            ctx.draw(true)
        },

 点击微信进行好友分享:

 shareFriend(){
                wx.canvasToTempFilePath({     //将canvas生成图片
                    canvasId: 'myCanvas',
                    x: 0,
                    y: 0,
                    width: 370,
                    height: 472,
//                    destWidth: 370,     //截取canvas的宽度
//                    destHeight: 500,   //截取canvas的高度
                    success: function (res) {
                        let urls = res.tempFilePath   //图片临时路径
                        wx.showShareImageMenu({  //分享给朋友
                            path: urls,
                            success: (res) => {
                                console.log("分享成功:", res);
                            },
                            fail: (err) => {
                                console.log("分享失败:", err);
                                wx.showToast({
                                    title: "分享失败",
                                    duration: 2000
                                })
                            },
                        })
                    }
                })
            }

点击保存,保存到本地相册

//保存至相册imgUrl
            clickSaveImg() {
                var _this = this
                wx.canvasToTempFilePath({     //将canvas生成图片
                    canvasId: 'myCanvas',
                    x: 0,
                    y: 0,
                    width: 335,
                    height: 472,
//                    destWidth: 400,     //截取canvas的宽度
//                    destHeight: 500,   //截取canvas的高度
                    success: function (res) {
                        _this._data.imgUrl = res.tempFilePath
                        wx.saveImageToPhotosAlbum({  //保存图片到相册
                            filePath: res.tempFilePath, //生成图片临时路径
                            success: function () {
                                wx.showToast({
                                    title: "图片已保存至相册!",
                                    duration: 2000
                                })
                            }
                        })
                    },
                    fail: error => {
                        wx.showToast({
                            title: "保存图片失败",
                            duration: 2000
                        })
                        if (error.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || error.errMsg === "saveImageToPhotosAlbum:fail auth deny" || error.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,
                                                })
                                            }
                                        },
                                    })
                                }
                            })
                        }

                    }
                })
            },

完整代码如下:






你可能感兴趣的:(javascript,小程序)