一、制作正常页面显示海报,实际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); //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();
}
})
}
})
},
三、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);
该文档实测有效,项目已上线