微信小程序使用canvas画布生成二维码海报分享图片（完整示例代码）

let qrcodeUrl = this.data.codeUrl

wx.getSystemInfo({

success(res) {

that.setData({

_width: res.windowWidth,

_heigth: res.windowHeight,

canvasType: true,

})

// 获取图片信息生成canvas

that.getImginfo([imgUrl, qrcodeUrl], 0);

}

})

},

// 获取图片信息

getImginfo: function (urlArr, _type) {

let that = this;

wx.getImageInfo({

src: urlArr[_type],

success: function (res) {

//res.path是网络图片的本地地址

if (_type === 0) { //商品图片

that.setData({

localImageUrl: res.path,

})

that.getImginfo(urlArr, 1)

} else {

that.setData({ //二维码

localCodeUrl: res.path,

})

// 创建canvas图片

that.createNewImg();

}

},

fail: function (res) {

//失败回调

console.log(‘Fail：’, _type, res)

}

});

},

//绘制canvas

createNewImg: function () {

let _width = this.data._width,

_heigth = this.data._heigth; //屏幕宽与高

let imgHeigth = this.data.swiperHeight, //原图片高度

scale = (_width - 40) / _width, //缩小比例

that = this;

let imgH = imgHeigth * scale; //绘制时图片显示高度

let ctx = wx.createCanvasContext(‘mycanvas’);

// 绘制背景

ctx.setFillStyle(“#fff”);

ctx.fillRect(0, 0, _width - 40, im