小程序canvas新版画图及处理图片模糊

onLoad(){

        const that = this;

        //获取屏幕的宽高

        wx.getSystemInfo({

            success: res => {

                var windowWidth = res.windowWidth;

                var windowHeight = res.windowHeight;

                that.setData({

                    canvasWidth: windowWidth - 80,//设置canvas的宽度

                    canvasHeight: windowHeight - 200,//设置canvas的高度

                    windowWidth: windowWidth//屏幕宽度

                })

            }

        })

}

drawImage(){

        const that = this;

        const unit = that.data.windowWidth / 375;

        const query = wx.createSelectorQuery()

        query.select('#shareCanvas')

            .fields({ node: true, size: true })

            .exec((res) => {

                const canvas = res[0].node;

                that.setData({

                    canvas:canvas

                })

                const context = canvas.getContext('2d')

                //处理图片模糊

                const dpr = wx.getSystemInfoSync().pixelRatio;

                canvas.width = res[0].width * dpr

                canvas.height = res[0].height * dpr

                context.scale(dpr, dpr)

                //填充白色背景

                const bg=canvas.createImage();

                bg.src = "/images/share_bg.png";

                bg.onload = () => {

                    context.drawImage(bg, 0, 0, that.data.canvasWidth, that.data.canvasHeight);

                    //封面图

                    const productImg = canvas.createImage()

                    productImg.src = detail.productImg;

                    productImg.onload = () => {

                        context.drawImage("1.png", 0, 0, that.data.canvasWidth, that.data.canvasWidth)

                    }

                    //推荐人

                    if(that.data.userInfo){

                        context.fillStyle="#8b8a8a";

                        context.font=unit*14+"px sans-serif";

                        context.fillText("惠风和畅  为你推荐", unit*10, unit*330);

                    }

                    //标题

                    context.fillStyle="#272727";

                    context.font=unit*16+"px sans-serif";

                    context.fillText("厚德载物", unit*10, unit*360);

                        

                    //二维码

                    const code = canvas.createImage()

                    code.src = "后台二维码地址";

                    code.onload = () => {

                        context.drawImage(code, unit*175, unit*320, unit*110, unit*110);

                    }

                }

            })

    }