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

canvas.js

//获取应用实例

const app = getApp()

Page({

/**

• 页面的初始数据

*/

data: {

// canvas

_width: 0, //手机屏宽

_heigth: 0,//手机屏高

swiperHeight: 300,//主图图片高度

canvasType: false,//canvas是否显示

loadImagePath: ‘’,//下载的图片

imageUrl: ‘https://cos.myfaka.com/car/service/1.jpg’, //主图网络路径

codeUrl: ‘https://cos.myfaka.com/car/share/code.jpg’,//二维码网络路径

localImageUrl: ‘’, //绘制的商品图片本地路径

localCodeUrl: ‘’, //绘制的二维码图片本地路径

},

/**

• 生命周期函数–监听页面加载

*/

onLoad: function (options) {

},

/按生成图片按钮时/

creatQrcodePictures: function () {

wx.showLoading({

title: ‘正在绘制图片’,

})

/获取手机宽高/

let that = this

let imgHeigth = this.data.swiperHeight

let imgUrl = this.data.imageUrl

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: r