微信小程序canvas生成海报笔记

微信小程序用固定分辨率的canvas在不同屏幕显示有问题怎么办呢？

我想法是看看能不能生成后作为图片显示？因为海报也不用什么动态载入效果，图片也能自动适应屏幕。

如果当成图片的话，因为一些网络图片的载入也是异步的，要等他们载入完成才能正常显示海报。

        //加载图片是异步的，并且还要加载多个网络图片和静态图片
        var image1 = canvas.createImage()
        image1.src = that.erweimasrc
        image1.onload = function () {
            ctx.drawImage(image1, 65, 151, 250, 250);
        }
        
        var image2 = canvas.createImage()
        image2.src = '../../app/public/static/wifi.png'
        image2.onload = function () {
            ctx.drawImage(image2, 22, 438, 108, 108); 
        }

那就涉及到一个新问题，如果需要两个异步过程完成才运行一个方法？要怎么写呢？

我想法是对象里面维持一个加载计数，计数加到那么大就可以判断它们加载完成了。

   this.JiaZaiJiShu = 0; // 加载图片计数

在每个加载图片都运行一个那个创建图片的方法

        var image1 = canvas.createImage()
        image1.src = that.erweimasrc
        image1.onload = function () {
            ctx.drawImage(image1, 65, 151, 250, 250);
            that.ChuangJianHaiBaoTuPian()
        }

最后是全部代码

import config from '../config/config.js'
function erweimaLogic(controller) {
    var baseurl = config.staticurl;
    var token = "";
    
    var posthead = {
        'content-type': 'application/json',
        'token': token
    }

    this.canvas = controller.canvas
    this.PingMuChaXunJieGuo = controller.PingMuChaXunJieGuo
    this.erweimasrc = null
    this.newController = controller
    this.haibaotempsrc = null;
    this.JiaZaiJiShu = 0; // 加载图片计数
    this.ShengChengHaiBaoWanBi = false;
    this.XiaZaiErWeiMaWanBi = false;
    var that = this;
    this.ShengChengXiaoChengXuMa = function (id) {
        
        that.CongHouDuanHuoQuErWeiMaLuJingDiZhi(id)

    }

    this.CongHouDuanHuoQuErWeiMaLuJingDiZhi = function (id) {
        let imgpath = `${baseurl}/erweima/${id}.jpg`
        that.CongHouDuanXiaZaiErWeiMa(imgpath)
    }


    this.CongHouDuanXiaZaiErWeiMa = function (imgpath) {
        wx.downloadFile({
            url: imgpath, //仅为示例，并非真实的资源
            success(res) {
                // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
                if (res.statusCode === 200) {
                    that.erweimasrc = res.tempFilePath
                    that.XiaZaiErWeiMaWanBi = true
                    that.ChuangJianHaiBao(that.canvas, that.PingMuChaXunJieGuo)
                }else{
                    console.log(res)
                    that.newController.FaSongError("下载二维码出错")
                }
            },
            fail: res => {
                console.log(res)
                that.newController.FaSongError("下载二维码出错")
            }
        })
    };

    this.ChuangJianHaiBao = function (canvas, res) {
        // 渲染上下文
        const ctx = canvas.getContext('2d')

        // Canvas 画布的实际绘制宽高
        // const width = res[0].width
        // const height = res[0].height
        const width = 380
        const height = 552
        

        // 初始化画布大小
        const dpr = 2
        canvas.width = width * dpr
        canvas.height = height * dpr
        console.log(canvas.width)
        console.log(dpr)
        ctx.scale(dpr, dpr)

        ctx.fillStyle = "#FFFFFF";
        ctx.fillRect(0, 0, 380, 552);

        ctx.font = "35px Inter"
        ctx.fillStyle = "#000000";
        ctx.fillText("微信扫码连", 48, 74);
        ctx.fillText("WiFi", 264, 74);
        ctx.font = "18px Inter"
        ctx.fillText("自动链接wifi", 52, 122);
        ctx.fillText("无需密码", 172, 122);
        ctx.fillText("快捷安全", 264, 122);

        ctx.fillStyle = "#398ADE";
        ctx.fillRect(0, 424, 380, 128);

        var image1 = canvas.createImage()
        image1.src = that.erweimasrc
        image1.onload = function () {
            ctx.drawImage(image1, 65, 151, 250, 250);
            that.ChuangJianHaiBaoTuPian()
        }


        var image2 = canvas.createImage()
        image2.src = '../../app/public/static/wifi.png'
        image2.onload = function () {
            ctx.drawImage(image2, 22, 438, 108, 108);
            that.ChuangJianHaiBaoTuPian()
        }


        ctx.font = "24px Inter"
        ctx.fillStyle = "#FFFFFF";
        ctx.fillText("免费共享", 168, 479);
        ctx.fillText("本店安全网络已覆盖", 148, 536);
        ctx.fillText("WIFI", 294, 479);

        that.ChuangJianHaiBaoTuPian()


    };

    this.ChuangJianHaiBaoTuPian = function () {
        if(that.JiaZaiJiShu >=2 ){
            let canvas = that.canvas
            wx.canvasToTempFilePath({
                canvas,
                success: res => {
                    that.haibaotempsrc = res.tempFilePath
                    that.newController.FaSongChuangJianHaiBaoWanCheng(that.haibaotempsrc)
                    that.ShengChengHaiBaoWanBi = true
                },
                fail: res => {
                    console.log(res)
                    that.that.newController.FaSongError("下载二维码出错")
                }
            })
        }else{
            console.log(that.JiaZaiJiShu)
            that.JiaZaiJiShu += 1
        }

    }

    this.XiaZaiHaiBao = function () {

        if(that.ShengChengHaiBaoWanBi){

            wx.saveImageToPhotosAlbum({
                filePath : that.haibaotempsrc,
                success(res) { 
                console.log("保存成功")
                console.log(res)
            }
            })

        }else{
            that.newController.FaSongError("海报还没有加载完毕，如果太久不行请刷新")
        }


    };

    this.XiaZaiErWeiMa = function () {

        if(that.XiaZaiErWeiMaWanBi){
            wx.saveImageToPhotosAlbum({
                filePath : that.erweimasrc,
                success(res) { 
                console.log("保存成功")
                console.log(res)
            }
            })

        }else{
            that.newController.FaSongError("二维码还没有加载完毕，如果太久不行请刷新")
        }


    };

};
module.exports = erweimaLogic;