一、制作正常显示海报,生成二倍海报隐藏 代码如下
<!--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>
/*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)手机端保存图片 当用户拒绝保存申请时下次点击按钮无法自动调用新的授权申请,点击按钮无反应
此问题已解决网上有各种教程解决方法,当前随笔未更新,只记录图片模糊问题,下个随笔增加拒绝授权至重新授权过程