微信小程序(mpvue)页面生成图片、分享、下载

页面生成图片

![](https://user-gold-cdn.xitu.io/2019/8/29/16cdb417888960ae?w=413&h=733&f=jpeg&s=62729)
// 生成画布
<canvas canvas-id="poster" disable-scroll="true"></canvas>

// css样式（画布绘制过程不能隐藏 可是又不能被用户看见 因此定位在用户看不到地方）
canvas {
    width: 620rpx;
    height: 969rpx;
    position: absolute;
    top: 0rpx;
    left: 0rpx;
}

// 1.绘制图片到画布,调用wx.getImageInfo()获取图片信息
let promise = new Promise(resolve => {
    wx.getSystemInfo({
        success: systemInfo => {
            wx.getImageInfo({
                src: DefaultBgUrl, //画布背景图
                success: picInfo => {
                    wx.getImageInfo({
                        src: wxAvatarUrl, //用户头像
                        success: userPortraitInfo => {
                            resolve({
                                systemInfo: systemInfo,
                                picPath: picInfo.path,
                                userPortrait: userPortraitInfo.path
                            });
                        }
                    });
                }
            });
        }
    })
});

promise.then(param => {
    let { type, nickname, groupName, groupTarget } = this.artical; //须要绘制的内容信息

    let dateData = new Date(),
        year = dateData.getFullYear(),
        month = dateData.getMonth() + 1,
        date = dateData.getDate(),
        worship = dateData.getDay();

    let percent = param.systemInfo.screenWidth / 750,
        ctx = wx.createCanvasContext('poster', this);

    // 画底图
    ctx.drawImage(param.picPath, 0, 0, 620 * percent, 969 * percent);

    ctx.setFillStyle('#fff');
    ctx.setFontSize(96 * percent);
    ctx.fillText(date, 41 * percent, 127 * percent);

    ctx.setFontSize(22 * percent);
    ctx.fillText(`${year}年${month}月 星期${worshipMap[worship] || '一'}`, 41 * percent, 167 * percent);

    let content = '喂，你可曾据说才思也许能在青春年少时得到，智慧也许会在腐朽前成熟。',
        contents = [],
        tempContents = [];

    for(let i = 0, len = content.length; i < len; i++){
        tempContents.push(content[i]);
        if(tempContents.length >= 20){
            contents.push(tempContents.join(''));
            tempContents = [];
        }
    }
    contents.push(tempContents.join(''));

    ctx.setFontSize(26 * percent);
    contents.forEach((str, idx) => {
        ctx.fillText(str, 41 * percent, (227 + 30 * idx) * percent, 560 * percent);
    });

    ctx.setFontSize(22 * percent);
    ctx.fillText('—— 爱默生', 41 * percent, (227 + 30 * contents.length + 30) * percent);

    // 打卡信息底色
    ctx.setFillStyle('#fff');
    ctx.fillRect(16 * percent, 587 * percent, 588 * percent, 200 * percent);

    // 画avatar
    ctx.drawImage(param.userPortrait, 39 * percent, 608 * percent, 74 * percent, 74 * percent);

    ctx.setFontSize(26 * percent);
    ctx.setFillStyle('#212121');
    ctx.fillText(nickname, 125 * percent, 638 * percent);

    ctx.setFontSize(22 * percent);
    ctx.setFillStyle('#9E9E9E');
    ctx.fillText(`${groupName}[${groupTarget.length > 15 ? groupTarget.substring(0, 15) + '...' : groupTarget}]`, 125 * percent, 670 * percent);

    ctx.setFillStyle('#F5F5F5');
    ctx.fillRect(40 * percent, 700 * percent, 532 * percent, 64 * percent);
    
    if(type == 1){
        ctx.drawImage('/static/images/daka_share_icon.png', 64 * percent, 720 * percent, 24 * percent, 24 * percent);
        ctx.setFontSize(22 * percent);
        ctx.setFillStyle('#757575');
        ctx.fillText(`~完成第${this.artical.content}次打卡，继续加油哦`, 98 * percent, 740 * percent);
    }else{
        let dynamic = this.artical.content;
        ctx.setFontSize(22 * percent);
        ctx.setFillStyle('#757575');
        ctx.fillText(dynamic.length > 21 ? dynamic.substring(0, 21) + '...' : dynamic, 64 * percent, 740 * percent);
    }

    // 美栗生活圈
    ctx.setFillStyle('#fff');
    ctx.fillRect(16 * percent, 800 * percent, 588 * percent, 120 * percent);

    // 画图 二维码
    ctx.drawImage('/static/images/ml.png', 40 * percent, 827 * percent, 64 * percent, 64 * percent);

    ctx.setFontSize(26 * percent);
    ctx.setFillStyle('#F0607D');
    ctx.fillText('美栗生活圈', 117 * percent, 853 * percent);

    ctx.setFontSize(20 * percent);
    ctx.setFillStyle('#9E9E9E');
    ctx.fillText('快来和我一块儿打卡吧！', 117 * percent, 883 * percent);

    ctx.drawImage('https://resource.yingyinglicai.com/creative/meili/life/ml_qrcode.png', 495 * percent, 817 * percent, 88 * percent, 88 * percent);

    ctx.draw(false, () => {
        this.createImg();
    });
})
复制代码

下载图片

wx.saveImageToPhotosAlbum({
    filePath: 'imgUrl', //要保存到相册的图片信息
    success(res) {
        wx.showModal({
            title: '提示',
            content: '保存成功，请前往相册查看！'
        });
    }
})
复制代码

敲黑板注意！！！！！！

必定要在小程序的后台管理中配置上微信的合法域名 'wx.qlogo.cn'