微信小程序纯前端生成海报并保存本地

需求

公司开发微信小程序，有一个海报页面，需要用户点击生成海报，可以将该该swipe-item 生成一个带二维码的图片，最终由纯前端实现!


技术调研

*
因为小程序的打包限制，不可能将所有的图片都放在代码目录里面。所以就得使用远端的图片，但是因为canvas对跨域图片的不支持，可以使用微信小程序中的API
:wx.getImageInfo()现将远端的图片临时保存。
* canvas 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级；并且使用display:none 和
visibility:hidden
的方式隐藏会导致canvas无法捕获画布内容，所以通过给canvas外部嵌套一个width:0;height:0;overflow:hidden的父级。
实现步骤

将远端图片暂存本地（以用户头像为例）
wx.getUserInfo({ //获取微信用户信息 success: function (res) { this
.getImageInfo(res.userInfo.avatarUrl);// 调取图片处理方法 this.setData({ userName:
res.userInfo.nickName }); } }); getImageInfo(url){ // 图片缓存本地的方法 if(typeof url
==='string'){ wx.getImageInfo({ // 小程序获取图片信息API src: url, success: function
(res) { this.setData({ head_img:res.path }) }, fail(err) { console.log(err) }
}) }
canvas绘制图片

点击生成海报按钮
handlePoster(e){ wx.getSetting({ // 获取用户设置 success(res) { if (!res.authSetting[
'scope.writePhotosAlbum']) { // 如果用户之前拒绝了授权 wx.openSetting({ success(tag){ if
(tag.authSetting["scope.writePhotosAlbum"]){ // 用户在设置页选择同意授权 // wx.showLoading({
// title: '正在生成...', // }) } } }); }else{ // 用户已经授权 wx.showLoading({ title:
'正在生成...', }) } } })
此时页面出现loading状态，canvas开始绘制海报：

首先绘制整个底部背景


在这里，我暂且用本地图片作为演示代替。绘制的canvas图片大小为750px*1344px大小，最终生成格式为jpg。大小大概就200多kb。非常的小，清晰度也不错。

我选择的背景图如上图所示；
const ctx = wx.createCanvasContext('notes'); ctx.clearRect(0, 0, 0, 0); const
arr2 = ['./big_img1.png', this.data.nodesData[index].detail_pic]; //
有图片海报背景图&&海报正文图片 const WIDTH=750; const HEIGHT=1334; // 绘制图片模板的 底图
ctx.drawImage(arr2[0], 0, 0, WIDTH, HEIGHT);
绘制海报的正文图片
// 绘制图片模板的 banner图 ctx.drawImage(arr2[1], 40,40, 670, 580);
绘制时间

因为我们的海报上面的时间 xxxx.xx.xx中的每个数字和点都是图片，所以时间也是一个个的小的以数字命名的图片绘制上去。而后台提供给我们的时间是个
秒(s)为单位的时间戳。首先得将时间戳转换为一个时间数字组成的数组：
dateFilter(date){ let gmt = new Date(date * 1000); let
nYear=String(gmt.getFullYear()); let nMonth =this.numFormatting(gmt.getMonth()+1
); let nDay =this.numFormatting(gmt.getDate()); let end_date = (nYear + '.' +
nMonth +'.' + nDay).split("") ; return end_date }, /** * 处理 月份 天数 个位数 */
numFormatting(num){if(String(num).length<2){ return '0'+num }else{ return num }
},
假设处理好的时间格式为 ：
let times=['2', '0', '1', '8', '.', '0', '4','.','1','2'];
接下来是绘制时间：
// 绘制 图片模板 的时间 const TEXT_DATE = ['2', '0', '1', '8', '.', '0', '4','.','1','2'
];for (let i = 0; i < TEXT_DATE.length; i++) { if (TEXT_DATE[i] != '.') { var
path3 = `./${TEXT_DATE[i]}.png`; }else { var path3 = './point.png'; } let
clientx =40 + 16 * i; ctx.drawImage(path3, clientx, 640, 16, 32); }
绘制用户头像

因为二维码中显示的用户头像是一个圆形图像，所以处理方式为：
// 绘制头像 ctx.save(); let r=32; let d = r*2; let cx = 102; let cy = 1172; ctx.arc
(cx+r, cy+r, r,0, 2 * Math.PI); ctx.clip(); ctx.drawImage(this.data.head_img,
cx, cy, d, d); ctx.restore();
这个时候 ，海报所需要的所有图片已经绘制成功，接下来我们开始处理文字部分：

canvas 绘制文字

canvas并不会自动的将文字折行处理，所以我们得自己考虑每行显示多少个文字，还得考虑中英文和符号所占字节的不同，在此，封装一个处理方法：
textByteLength(text,num){ // text为传入的文本 num为单行显示的字节长度 let strLength = 0; //
text byte length let rows=1; let str=0; let arr=[]; for (let j = 0; j <
text.length; j++) {if (text.charCodeAt(j) > 255) { strLength += 2; if
(strLength > rows * num) { strLength++; arr.push(text.slice(str, j)); str = j;
rows++; } }else { strLength++; if (strLength > rows * num) {
arr.push(text.slice(str, j)); str = j; rows++; } } } arr.push(text.slice(str,
text.length));return [strLength, arr, rows] // [处理文字的总字节长度，每行显示内容的数组，行数] },
这个时候 就可以开始绘制文字了：

绘制正文和 出处
const CONTENT_ROW_LENGTH = 40; // 正文 单行显示字符长度 let [contentLeng, contentArray,
contentRows] =this.textByteLength(this.data.nodesData[index].text,
CONTENT_ROW_LENGTH); ctx.setTextAlign('left') ctx.setFontSize(32); let
contentHh =32 * 1.3; for (let m = 0; m < contentArray.length; m++) {
ctx.fillText(contentArray[m],40, 732 + contentHh * m); } // 绘制 出处
ctx.setTextAlign('right') ctx.setFontSize(32); ctx.fillText(`——${this
.data.nodesData[index].refer}`,710, 996, 710);
绘制二维码边上的说明
// 绘制二维码右边说明 ctx.setTextAlign('left') ctx.setFontSize(28); ctx.setFillStyle(
'rgba(34,34,34,.64)') ctx.fillText('长按小程序码', 250, 1174); ctx.fillText(`${this
.data.userName}邀你进入掌阅读好书`,250, 1230); ctx.draw();
此时如果canvas标签能够显示查看，就能看到一个完美的海报绘制完成，现在只差最后一步，保存canvas；使用微信方法
canvasToTempFilePath()将canvas海报保存到本地临时文件路径；在使用saveImageToPhotosAlbum()将图片保存到本地相册：
setTimeout(function () { wx.canvasToTempFilePath({ canvasId: 'notes', fileType:
'jpg', success: function (res) { wx.saveImageToPhotosAlbum({ filePath:
res.tempFilePath, success(res) { wx.hideLoading(); wx.showToast({ title:'保存成功',
}); }, fail(){ wx.hideLoading() } }) } }) },500);
然后查看存储图片的路径文件夹，最终生成的海报：



总结：


在做这个功能之前，canvas用的非常少，很多方法都是现成百度查询得出来的结果，这次的canvas生成海报并保存本地的实现过程中，让我学到了很多东西；因为项目做得比较急，很多的代码没有经过细致的打磨，在此，也希望看到本文章的朋友们及时指点。

• « 上一篇：从零开始的ESP8266探索（03）-开发环境搭建
• » 下一篇：cuda : 依赖: cuda-9-0 (>= 9.0.176) 但是它将不会被安装 问题解决记录