用云开发优化博客小程序(三)——生成海报功能

生成海报的功能终于被弥补了。

周末花了一些时间在小程序版博客中完成了生成海报的功能。对于新手来说，我还是会遇到很多问题。在这里，我简单记录一下坑。

先看效果图：

思路

比较简单，主要是利用微信提供的画布画布动态构建海报。指导用户保存到本地相册进行共享。

主要涉及小程序画布和图片相关的API。如果不熟悉，请先参考下一篇文档。

资源准备

首先，我们需要准备一些组成海报的资源，比如文章的第一张图片，标题，以及要分享的小程序代码。文章的第一张图片，是从腾讯云的对象存储中获取的，需要在开发设置中配置downloadFile的合法域名。至于为什么可以参考免费对象商店——，齐牛云或者腾讯云。

图片可以直接通过wx.getImageInfo获取，对应的API也比较简单：

Wx.getimageinfo ({src: URL，success(RES){ console . log(RES . path)})至于小程序代码，目前使用的是小程序本身，暂时不动态生成，以后会迭代。将小程序代码直接上传到云存储也相对容易获得：

wx . cloud . download file({ fileid 3360 fileid })。然后(RES={ console . log(RES . tempfile path)})最后根据实际情况得出海报上需要显示的其他内容。

准备好

生成海报

资源后，我们需要用画布来构造海报。

向wxml添加画布元素时，避免在页面上显示它们是很重要的。您可以在屏幕外设置位置，例如top:99999rpx。

view class=' canvas-box ' canvas style=' width : 600 px；'高度： 970 px；'canvas-id='mycanvas' /view

und-color:="" helvetica="" microsoft="">然后需要了解下canvas相关API和属性了。

优先创建canvas的绘图上下文CanvasContext对象,然后通过CanvasContext中的属性进行绘制，最后通过draw()将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。具体可以参考下面的代码，结合注释和官方文档很容易理解：

var context = wx.createCanvasContext('mycanvas');    context.setFillStyle('#ffffff');//设置填充色    context.fillRect(0, 0, 600, 970);//填充一个矩形。用 setFillStyle 设置矩形的填充色    context.drawImage(postImageLocal, 0, 0, 600, 300); //绘制首图    context.drawImage(qrcodeLoal, 210, 650, 180, 180); //绘制二维码    context.setFillStyle("#000000");    context.setFontSize(20);//设置字体大小    context.setTextAlign('center');//设置字体对齐    context.fillText("阅读文章,请长按识别二维码", 300, 895);    context.setFillStyle("#000000");    context.beginPath() //分割线    context.moveTo(30, 620)    context.lineTo(570, 620)    context.stroke();    context.setTextAlign('left');    context.setFontSize(40);    if (title.lengh <= 12) {      context.fillText(title, 40, 360);//文章标题    } else {      context.fillText(title.substring(0, 12), 40, 360);      context.fillText(title.substring(12, 26), 40, 410);    }    context.setFontSize(20);    if (custom_excerpt.lengh <= 26) {      context.fillText(custom_excerpt, 40, 470);//文章描述    } else {      context.fillText(custom_excerpt.substring(0, 26), 40, 470);      context.fillText(custom_excerpt.substring(26, 50) + '...', 40, 510);    }    context.draw();

这里需要注意的是填写文字时，画布是不会自动换行的，所以这里需要根据字体大小和字体多少来自行控制换行。

在填充完canvas之后，通过wx.canvasToTempFilePath来生成图片，并保存在临时路径下，具体代码如下：

wx.canvasToTempFilePath({  canvasId: 'mycanvas',  success: function(res) {    var tempFilePath = res.tempFilePath;    wx.hideLoading();    console.log("海报图片路径：" + res.tempFilePath);    that.setData({      showPosterPopup: true,//展示弹窗      showPosterImage: res.tempFilePath //对应路径    })  },  fail: function(res) {    console.log(res);  }});

到这里，最简单的海报生成完成了，接下来就是涉及交互了。

交互样式

首先利用zanui的zan-popup来实现弹出层，还是比较方便的。具体样式就不贴了，可以直接看我的源码。

弹出层中加载生成好的海报图片，通过按钮引导用户保存至本地相册，在保存相册时，需要用户授权本地相册的权限，这里需要做好交互，当用户拒绝之后再次想保存时，让他重新授权。

当用户取消时，再次提醒：

具体代码如下，供参考：

/** * 保存海报图片 */savePosterImage: function() {  let that = this  wx.saveImageToPhotosAlbum({    filePath: that.data.showPosterImage,    success(result) {      console.log(result)      wx.showModal({        title: '提示',        content: '二维码海报已存入手机相册，赶快分享到朋友圈吧',        showCancel: false,        success: function(res) {          that.setData({            showPosterPopup: false          })        }      })    },    fail: function(err) {      console.log(err);      if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {        console.log("再次发起授权");        wx.showModal({          title: '用户未授权',          content: '如需保存海报图片到相册，需获取授权.是否在授权管理中选中“保存到相册”?',          showCancel: true,          success: function(res) {            if (res.confirm) {              console.log('用户点击确定')              wx.openSetting({                success: function success(res) {                  console.log('打开设置', res.authSetting);                  wx.openSetting({                    success(settingdata) {                      console.log(settingdata)                      if (settingdata.authSetting['scope.writePhotosAlbum']) {                        console.log('获取保存到相册权限成功');                      } else {                        console.log('获取保存到相册权限失败');                      }                    }                  })                }              });            }          }        })      }    }  });}

到这里，小程序的生成海报功能基本上就完成了。

总结

其实生成海报的功能还有很多小问题，由于最近项目比较紧匆匆上了，后面找时间会优化。

通过生成海报的功能，主要还是学习了画布的API，并通过实战也基本可以上手canvas，至于画布上排版，样式就需要自己耐心了，尤其是一些小地方。

程序上线后我才发现，海报上的标题，由于有中英文，所占的字符不同，所以换行的处理过于草率了，导致有英文的标题在位置上存在偏差。

后期有空的话再持续改善吧～