一、制作正常显示海报，生成二倍海报隐藏 代码如下
{{sendName}}
保存图片
/*css*/
.btn {
width: 300rpx;
height: 90rpx;
line-height: 90rpx;
text-align: center;
color: #fff;
font-size: 38rpx;
border-radius: 10rpx;
background: #f9c22e;
}
/* */
.show{
width:750rpx;
height:1000rpx;
background: #fff;
border:1px solid red;
position: relative;
}
.show .card{
display: block;
width:690rpx;
height: 940rpx;
margin:20rpx auto 0;
}
.show .name,.show .header{
position: absolute;
}
.show .name{
width:100%;
text-align: center;
color:red;
top:26rpx;
}
.show .header{
width:100rpx;
height: 100rpx;
border-radius: 100%;
top:500rpx;
left:100rpx;
}
二、canvas 画二倍图 文字居中 实际展示正常海报为375*470 绘制中生成图模糊(文字有锯齿边，图片模糊)。绘制过程中绘制二倍图大小750*940 并保存，则能解决该问题
let x = ctx.width / 2;//canvas宽的一半
//画图
drawCanvas: function () {
let that = this;
let ctx = wx.createCanvasContext('myCanvas');
let ctxW = 750;
let ctxH = 1000;
ctx.width = 750;
ctx.height = 1000;
let x = ctx.width / 2;
// 垂直渐变
const grd = ctx.createLinearGradient(0, 0, 0, ctxH);
grd.addColorStop(0, '#ffffff');
grd.addColorStop(1, '#ffffff');
ctx.setFillStyle(grd);
ctx.fillRect(0, 0, ctxW, ctxH);
wx.getImageInfo({
src: that.data.cardPath,
success: (res) => {
ctx.drawImage(res.path, 0, 0, 750, 1000); //card
ctx.setFontSize(32) //字体大小
ctx.setFillStyle('red') //字体颜色
ctx.textAlign = "center"; //文字居中
ctx.fillText(that.data.sendName, x, 34)
ctx.stroke();
wx.getImageInfo({
src: that.data.headPath,
success: (res) => {
ctx.save();
ctx.beginPath(); //开始绘制
ctx.arc(150,358,50, 0, 2 * Math.PI)
ctx.fill()
ctx.clip(); //剪切
ctx.drawImage(res.path,100, 308, 100, 100); //userHeader // 推进去图片必须是https
ctx.restore(); //恢复之前保存的绘图上下文 继续绘制
/**/
ctx.save();
ctx.draw();
}
})
}
})
},
三、下载保存图片
// 保存图片
saveImage: function (e) {
wx.canvasToTempFilePath({
x: 0, //指定的画布区域的左上角横坐标
y: 0, //指定的画布区域的左上角纵坐标
width: 750, //指定的画布区域的宽度
height: 940, //指定的画布区域的高度
destWidth: 750, //输出的图片的宽度
destHeight: 940, //输出的图片的高度
canvasId: 'myCanvas',
fileType: 'jpg', //图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。
quality: 1,
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(result) {
wx.showToast({
title: '图片保存成功',
icon: 'success',
duration: 2000
})
}
})
}
})
},
结果对比：左图文字明显有锯齿，右图没有，用户头像右图更清晰。保存下来看效果更明显。
tips：该文档解决两个问题
(1)文字居中显示
(2)生成图模糊
(3)圆形头像绘制，另一篇文档实际上线项目中手机端头像保存为空，此版本优化。
(4)页面加载完成绘制图形，实际项目中页面加载完成但接口数据不一定返回，所以绘图过程需在接口数据成功返回中调用，避免用户头像为空，绘图为空
(5)优化上一版本大量无用代码，全程使用线上数据代码
(6)canva绘制海报时可添加透明背景。
// 垂直渐变
const grd = ctx.createLinearGradient(0, 0, 0, ctxH);
grd.addColorStop(0, 'transparent');
grd.addColorStop(1, 'transparent');
ctx.setFillStyle(grd);
(7)手机端保存图片 当用户拒绝保存申请时下次点击按钮无法自动调用新的授权申请，点击按钮无反应
此问题已解决网上有各种教程解决方法，当前随笔未更新，只记录图片模糊问题，下个随笔增加拒绝授权至重新授权过程
