微信小程序生成图片方法

微信 小程序 988      收藏
微信小程序生成图片方法

var that = this;
// 创建一个绘图区域
var ctx = wx.createCanvasContext('shareCanvas');

App.WxService.getImageInfo({
    src: 'https://www.xxx.com/demo.jpg'
}).then(res => {
    // 绘制海报背景图
    ctx.drawImage(res.path, 0, 0, 480, 800);

    // 获取用户小程序码
    return App.WxService.getImageInfo({
        src: 'https://www.xxx.com/qrcode.jpg'
    });
}).then(res => {
    // 绘制用户小程序码
    var qrImgSize = 180
    ctx.drawImage(res.path, 150, 410, qrImgSize, qrImgSize);

    return App.WxService.getUserInfo();
}).then(res => {
    // 绘制用户头像
    var avatarImgSize = 65;
    ctx.drawImage(res.userInfo.avatarUrl, 20, 680, avatarImgSize, avatarImgSize);
    ctx.stroke();
    ctx.draw();
    // 将画布的文件保存到本地
    return App.WxService.canvasToTempFilePath({
        destWidth: 480,
        destHeight: 800,
        canvasId: 'shareCanvas',
    });
}).then(res => {
    if (res.tempFilePath !== undefined) {
        that.setData({
            shareImage: res.tempFilePath,
        });
    }
});