一、制作正常页面显示海报，实际canvas画布生成二倍图隐藏，下载时缩小显示即可解决模糊问题。二倍海报图屏幕仅能展示一半。保存图为750*940，实际canvas大小应为375px*470px ，此处二倍画图设置canvas大小为750px*940px

代码如下：

<!--index.wxml--><view class="container"><view class="show"><image src="{{cardPath}}" alt="" class="card"></image><text class="name">{{sendName}}</text><image src="{{headPath}}" class="header"></image></view><view class="btn" bindtap="saveImage">保存图片</view><view class="canvasBox" style="width:0;height:0;overflow: hidden;opacity:0;position:absolute;left:-750px;top:0;"><canvas canvas-id='myCanvas' style='width:750px;height:1000px;'></canvas></view></view>

二、canvas绘图过程：文字居中显示时设置let x = ctx.width/2 画布宽度一半，设置文字时距离左边像素为x，既为中心位置

/*画图*/drawCanvas: function () {let that = this;let ctx = wx.createCanvasContext('myCanvas');let ctxW = 750;let ctxH =940;ctx.width = 750;ctx.height =940;let x = ctx.width / 2;//canvas宽的一半// 垂直渐变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,940); //cardctx.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 // 推进去图片必须是httpsctx.restore(); //恢复之前保存的绘图上下文 继续绘制/**/ ctx.save();ctx.draw();}})}})},

三、wx.canvasToTempFilePath(Object object, Object this)下载保存图片

把当前画布指定区域的内容导出生成指定大小的图片。在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）圆形头像绘制，另一篇文档实际上线项目中手机端头像保存为空，此版本优化。

（6）canva绘制海报时可添加透明背景。

// 垂直渐变const grd = ctx.createLinearGradient(0, 0, 0, ctxH);grd.addColorStop(0, 'transparent');grd.addColorStop(1, 'transparent');ctx.setFillStyle(grd);

该文档实测有效，项目已上线