微信小程序绘制到canvas上并保存图片

绘制canvas画布和保存到手机

	
	getShareQrCode() {
        let that = this
        return new Promise((resolve, reject) => {
            wx.request({
                url: 'GET_QRCODE',	//请求路径
                method: "POST",
                data: {
                    sceneParam: that.data.sceneParam,  //传入的参数
                    pageUrl: that.data.pageUrl  //指定页面路由
                },
                fail: function (res) {
                    wx.showToast({
                        title: '海报生成失败',
                        icon: 'error'
                    })
                },
                success: function (res) {
                    if (res.data.isSuccess == 'Y')
                        resolve(res.data.codePath)	//回调图片链接
                    else {
                        wx.showToast({
                            title: '海报生成失败',
                            icon: 'error'
                        })
                        reject("二维码获取失败")
                    }
                }
            });
        });
    },

	// 创建画布
    async createShareCanvas() {
        let that = this
        let QrCode = await that.getShareQrCode()	//获取圆圈内的图片
        const query = wx.createSelectorQuery()
        query.select('#myCanvas')
            .fields({
                node: true,
                size: true
            })
            .exec((res) => {
                const canvas = res[0].node
                const ctx = canvas.getContext('2d')

                // 缩放和宽高
                const dpr = wx.getSystemInfoSync().pixelRatio // 设备像素比
                canvas.width = 375 * dpr
                canvas.height = 667 * dpr
                ctx.scale(dpr, dpr)

                // 绘制背景
                const background = canvas.createImage()
                background.src = "https://***.***/shareBackground.png"
                background.onload = () => {
                    ctx.drawImage(background, 0, 0, canvas.width/dpr, canvas.height/dpr)

                    ctx.moveTo(110, 590)
                    ctx.lineTo(110, 630)
                    ctx.strokeStyle = "white";
                    ctx.stroke()


                    ctx.fillStyle = "white";
                    ctx.font = "bold 16px Arial"
                    ctx.fillText('16px大一点的文字', 120, 605)

                    ctx.font = "300 13px Arial"
                    ctx.fillText('13px小一点的文字', 120, 625)

                    // 绘制二维码
                    ctx.save()
                    const miniQrCode = canvas.createImage()
                    miniQrCode.src = QrCode
                    miniQrCode.onload = () => {
                        // ctx.drawImage(miniQrCode, 20, 570, 80, 80)
                        var canvasW = 80; //绘制的二维码宽度
                        var canvasH = 80; //绘制的二维码高度
                        var canvasL = 20; //绘制的二维码在画布上的位置
                        var canvasT = 570; //绘制的二维码在画布上的位置 y轴值越大越靠下

                        //先画个圆   
                        ctx.save(); // 先保存状态 已便于画完圆再用        

                        ctx.beginPath();
                        ctx.arc(canvasL + 40, canvasT + 40, 40, 0, 2 * Math.PI, false);
                        ctx.stroke();
                        ctx.clip(); //画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内    
                        ctx.drawImage(miniQrCode, canvasL, canvasT, canvasW, canvasH); // 推进去图片     
                        ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制

                        wx.showToast({
                            title: '海报生成成功',
                            icon: 'success'
                        })
                    }
                    // ctx.draw(true)
                }
            })
    },

   // 保存画布内容
    saveShareCanvas() {
        const query = wx.createSelectorQuery()
        query.select('#myCanvas')
            .fields({
                node: true,
                size: true
            })
            .exec((res) => {
                const canvas = res[0].node
                wx.canvasToTempFilePath({ //将canvas生成图片
                    canvas: canvas,
                    success: function (res) {
                        wx.saveImageToPhotosAlbum({ //保存图片到相册
                            filePath: res.tempFilePath,
                            success: function () {
                                wx.showToast({
                                    title: "图片保存成功！",
                                    duration: 2000
                                })
                            },
                            fail(res) {
                                if (res.errMsg != 'saveImageToPhotosAlbum:fail cancel') {
                                    wx.showModal({
                                        content: '检测到您没有授权保存图片或视频到你的相册权限，是否去设置打开？',
                                        confirmText: "确认",
                                        cancelText: "取消",
                                        success: function (res) {
                                            if (res.confirm) {
                                                wx.openSetting({
                                                    success: (res) => {}
                                                })
                                            }
                                        }
                                    });
                                }
                            }
                        })
                    },
                    fail: function (res) {
                        console.log(res)
                    }
                })
            })
    },

<!-- 画布   van-* 用的vantUI -->
<van-overlay show="{{ shareCanvas }}">
    <view style="height:100vh; display: flex;flex-direction: column;justify-content: center;align-items: center;">
        <canvas type="2d" id="myCanvas" style="width: 375px; height: 667px"></canvas>
        <view style="display: flex; justify-content: space-between;width: 70%; margin-top: 20rpx;">
            <van-button round type="default" size="small" block style="width: 200rpx;" bind:tap="changeShareCanvas">取消</van-button>
            <van-button round color="#fe9400" size="small" block style="width: 200rpx;" bind:tap="saveShareCanvas">保存</van-button>
        </view>
    </view>
</van-overlay>