微信小程序(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'