样式
主要是定义宽高,采用fixed定位,画的时候在屏幕外(测试的时候可以先去掉定位查看效果)
<canvas canvas-id="myCanvas" style='width:{{canvasWidth}}px; height:{{canvasHeight}}px;position:fixed;top: -10000px;'></canvas>
生成海报的方法
//生成海报
shareHaiBao(e) {
showToast('正在生成...', 'loading', 2000);
let that = this;
// 获取到当前用户信息
let userInfo = this.data;
console.log(userInfo)
let promise = new Promise((resolve, reject) => {
wx.downloadFile({
url: 'https://www.abc.com/imgs/front/images/nodata.jpg', //仅为示例，并非真实的资源
success: function(res) {
// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
wx.playVoice({
filePath: res.tempFilePath
})
let filePath = res.tempFilePath;
console.log("ok")
resolve(filePath);
}
}
})
});
promise.then(res => {
console.log(res);
let data = {
user: userInfo,
avarUrl: res
}
this.canvansWrite(data) //绘制画布
.then(res => {
that.previewImg(res) //预览图片
})
}, err => {
console.log(err)
})
// 绘制画布
},
绘制画布js代码
注意事项:
1.这里用promise实现绘制完成后再预览的效果
2.canvansWrite(user) user: 在这里因为我需要用到的绘制的参数通过user传过来
3.可以从第四点开始看
4.绘制圆形一般是先画外圆,再绘制头像
5.绘制文字,第6点用到文字的坐标,绘制的都是汉字时可以用字符串个数*每个字体长度计算出总长,方便文字居中,字符串中涉及到数字时数字长度和汉字不一致,不适用
6.注意绘制图片的时候,如果用的是线上的图片 需要 在线图片地址转换为本地图片,才能绘制
两个方法:一个是wx.getImageInfo()详情可以看官方文档
另一个是用wx.downloadFile()的api将图片下载下来然后 保存到临时缓存中,绘制头像的shareHaiBao()中就使用了该方法
canvansWrite(user) {
let that = this;
return new Promise((resolve, reject) => {
// 1.获取屏幕宽高
console.log(this.data);
// 2.获取头像的地址
let aver = user.avarUrl;
console.log(aver);
// 3.画布的参数
const data = {
x: 0,
y: 0,
wid: that.data.canvasWidth,
height: that.data.canvasHeight
}
// 4.开始绘制背景图,这里用本地的图片
ctx = wx.createCanvasContext('myCanvas')
ctx.drawImage('/images/haibao.jpg', data.x, data.y, data.wid, data.height)
// ctx.draw()
// 5.绘制头像(这里没有绘制,只是拿到坐标,因为我的项目中用不到)
let avatarurl_width = data.wid * 0.2, //绘制的头像宽度
avatarurl_heigth = data.wid * 0.2, //绘制的头像高度
avatarurl_x = data.wid / 2 - avatarurl_width / 2, //绘制的头像在画布上的位置坐标
avatarurl_y = 36;
// 6.绘制工作名称(就是绘制文字,6.7一样)
let nickName = user.user.demanditem.jobName;
console.log(nickName);
let nickLen = nickName.toString().length; // 用户名长度
let max_nickname_width = nickLen * 30; //一个汉字的宽度为15,获取文字总宽度
ctx.setFillStyle('#060614'); // 文字颜色
ctx.setFontSize(30); // 文字字号
ctx.fillText(nickName, data.wid / 2 - max_nickname_width / 2, data.height * 0.2);
ctx.font = 'normal 10px sans-serif';
// 7.绘制薪资文字
let des = user.user.demanditem.salary;
des = '综合薪资:' + des + '元';
console.log(nickName);
let desLen = des.toString().length; // 用户名长度
console.log(desLen);
let max_des_width = desLen * 25; //一个汉字的宽度为10,获取文字总宽度
ctx.setFillStyle('#060614');
ctx.setFontSize(25);
ctx.fillText(des, data.wid * 0.2, data.height * 0.4);
ctx.font = 'normal 10px sans-serif';
// 招聘人
let realName = user.user.demanditem.realName;
realName = realName + '正在寻找合作伙伴,快来看看吧';
console.log(realName);
let realNameLen = realName.toString().length; // 用户名长度
console.log(desLen);
let max_realName_width = realNameLen * 10; //一个汉字的宽度为10,获取文字总宽度
ctx.setFillStyle('#444543');
ctx.setFontSize(10);
ctx.fillText(realName, data.wid * 0.2, data.height * 0.45);
ctx.font = 'normal 10px sans-serif';
// 8.绘制二维码
let twoImgUrl = that.data.twoImgUrl;
console.log('二维码地址:' + twoImgUrl);
let twoImg_width = data.wid * 0.2, //绘制的二维码宽度
twoImg_heigth = data.wid * 0.2, //绘制的二维码高度
twoImg_x = data.wid / 2 - avatarurl_width / 2, //绘制的头像在画布上的位置
twoImg_y = 36;
ctx.save(); //
ctx.beginPath();
ctx.arc(avatarurl_width / 2 + avatarurl_x, data.height * 0.66 + twoImg_heigth / 2, avatarurl_width / 2, 0, Math.PI * 2, false);
ctx.clip();
//wx.getImageInfo 在线图片地址转换为本地图片,才能绘制
wx.getImageInfo({
src: twoImgUrl,
success: function(res) {
ctx.drawImage(res.path, avatarurl_x, data.height * 0.66, avatarurl_width, avatarurl_heigth);
ctx.restore();
ctx.draw(false, function() {
console.info('绘制成功');
setTimeout(function() {
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
quality: '1',
success: function(res) {
let tempFilePath = res.tempFilePath;
resolve(tempFilePath); //将临时图片地址暴露出去,这里用promise方便在绘制完成之后再执行预览
that.setData({
imagePath: tempFilePath,
hide_poster: false
});
console.log("图片下载到临时文件夹了")
},
fail: function(res) {
console.log(res);
}
}, that);
}, 3000);
});
}
})
});
},
预览图片api
//预览图片
previewImg(tempFilePath) {
console.log(this.data.imagePath)
console.log(tempFilePath);
if (tempFilePath) {
//预览图片，预览后可长按保存或者分享给朋友
wx.previewImage({
urls: [tempFilePath]
})
}
},
