1、如果要处理多张海报绘制需要使用Promise先把海报加载到本地然后进行绘制
// 网络图片回调
downfile(url) {
//下载网络图片的promise对象
return new Promise(function(resolve, reject) {
wx.downloadFile({
url: url,
success: function(res) {
resolve(res.tempFilePath);
}
});
});
}
2、点击进行绘制
// 生成二维码
generateQr() {
wx.showLoading({
title: '绘制中...'
});
let a = this.all_arr;
let hb = a.img_url;//第一张海报路劲
let tx = wx.getStorageSync('wxUserInfo');//头像取本地缓存
let photo = tx.head_icon;//微信头像
let qr = this.qr;//二维码路劲
let name = tx.nick_name;//微信昵称
console.log(727, hb, photo, qr);
let promise1 = this.downfile(hb);//调用Promise加载在本地
let promise2 = this.downfile(photo);//调用Promise加载在本地
let promise3 = this.downfile(qr);//调用Promise加载在本地
console.log(1111, promise1, promise2, promise3);
Promise.all([promise1, promise2, promise3])
.then(res => {
// console.log(557,res) //就是所有的网络图片都下载到本地后在绘制图像。
let ctx = wx.createCanvasContext('prodImage');
ctx.setFillStyle('#fff');
ctx.fillRect(0, 0, 270, 480); //填充色
ctx.drawImage(res[0], 0, 0, 270, 350);
// 绘制圆形头像
ctx.save(); //保存当前的绘图上下文。
ctx.beginPath(); //开始创建一个路径
ctx.arc(28 / 2 + 25, 28 / 2 + 380, 14, 0, 2 * Math.PI, false); //画一个圆形裁剪区域
ctx.clip(); //裁剪
ctx.drawImage(res[1], 25, 380, 28, 28); //绘制图片
ctx.restore(); //恢复之前保存的绘图上下文
// 绘制头像
ctx.drawImage(res[2], 181, 360, 64, 64);
//绘制二维码
//绘制文字超过2行换行显示
var text = name;
var chr = text.split('');
var temp = '';
var row = [];
ctx.setFillStyle('#444'); //文字颜色：默认黑色
ctx.font = 'normal bold 12px PingFangSC-Semibold';
for (let a = 0; a < chr.length; a++) {
if (ctx.measureText(temp).width < 100) {
temp += chr[a];
} else {
a--;
row.push(temp);
temp = '';
}
}
row.push(temp);
if (row.length > 2) {
var rowCut = row.slice(0, 2);
var rowPart = rowCut[1];
var test = '';
var empty = [];
for (var a = 0; a < rowPart.length; a++) {
if (ctx.measureText(test).width < 100) {
test += rowPart[a];
} else {
break;
}
}
empty.push(test);
var group = empty[0] + '...'; //这里只显示两行，超出的用...表示
rowCut.splice(1, 1, group);
row = rowCut;
}
for (var b = 0; b < row.length; b++) {
ctx.fillText(row[b], 60, 390 + b * 15);
}
//绘制文字结束
ctx.setFillStyle('#666'); //文字颜色：默认黑色
ctx.font = 'normal 10px PingFang-SC-Regular';
if (row.length > 1) {
ctx.fillText('长按识别 即刻选购', 60, 425); //绘制文本
} else {
ctx.fillText('长按识别 即刻选购', 60, 410); //绘制文本
}
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#f4f4f4';
ctx.moveTo(0, 435);
ctx.lineTo(270, 435);
ctx.stroke();
ctx.setFillStyle('#999'); //文字颜色：默认黑色
ctx.font = 'normal 14px PingFangSC-Regular';
ctx.fillText('保存分享海报', 100, 462); //绘制文本
ctx.drawImage('./image/down.png', 74, 447, 20, 20); //绘制图片
//调用draw()开始绘制
ctx.draw();
wx.hideLoading();
return res;
})
.then(res => {
// console.log(592,res);
});
},
