1. 前言
近年来，随着智能手机和社交网络的普及，海报已成为了一种重要的宣传方式。海报可以用来宣传餐厅、电影、音乐会、展览、活动等一系列的主题，因为它介于广告和艺术之间，更加容易打动人心。另外，随着各种开源技术的普及，制作海报，越来越变得容易和便捷。
在这篇文章中，我们将会通过java后端技术，介绍如何生成小程序海报，以便更好地推广商店、宣传活动或其他营销目的。
2. 关于小程序海报
小程序海报的概念源于微信小程序。小程序海报吸引人的地方在于它相对于普通的分享链接，它可以更直观地传递内容，比如宣传页面的截图和主要信息等等，而且可以直接分享给好友或其他社交媒体平台。它不需要用户下载APP，也不需要打开浏览器，让用户时限享受流畅的体验。所以小程序海报的作用相当强大，比传统的海报更具有优势。
2.1 小程序海报生成的要点
生成小程序海报需要以下三个要素：
图片资源：海报背景图片和要嵌入的图片元素，比如头像、二维码、文字等；
海报样式：确定页面的图片、文字大小和颜色、排版样式等等；
渲染机制：把这个小程序页面渲染成图片。在小程序中，我们可以用canvas标签来完成画图，而在生成小程序海报时，我们需要利用类似jsdom的工具库来做到用户不可见的后台运行，得到宽、高为固定值的参考视图，再将这个参考视图以到设备像素比的宽、高生成图片。
3. 实现步骤
3.1 用户授权登录
想要生成有微信相关信息的小程序海报，必须要获得该用户授权后才可以。用户授权涉及到微信提供的code，目的是为了授权完了之后，可以通过JS-SDK接口获得用户的openid等个人信息。code只能使用一次，有效期为5分钟，如果超时需要重新授权。
public class WxAuthApi {
private WxConfig wxConfig;
public WxAuthApi(WxConfig wxConfig) {
this.wxConfig = wxConfig;
}
/**
* @param code 每个用户不一样
* @return 接口调用凭证或错误信息
*/
public String getAccessToken(String code) {
String url = wxConfig.AUTH_ACCESS_TOKEN_URL
.replace("APPID", wxConfig.getAppId())
.replace("SECRET", wxConfig.getAppSecret())
.replace("CODE", code);
return HttpUtils.get(url);
}
//其他方法省略
}
3.2 把小程序页面渲染成图片
小程序的渲染原本是采用微信官方提供的canvas渲染方式，而海报的生成需要把这个小程序渲染成图片。小程序海报生成并不是端上使用canvas，在后台用nodejs虚拟的dom渲染好每一个UI组件后，再用html2canvas库或者puppeteer库将渲染好的html元素，突变成图片。其中，html2canvas库适合小程序海报生成，html2canvas基于canvas渲染即伪装成了标准的浏览器，可以正常的解析CSS和JS。下面是一个基本的生成海报的实现：
Page({
data: {
bgImg: "../../images/poster-bg.jpeg",
avatarUrl: "../../images/avatar.jpeg",
qrcodeUrl: "../../images/qrcode.jpeg",
},
onLoad:function(){
this.drawPoster();
},
//绘制海报
drawPoster:function(){
const ctx = wx.createCanvasContext("posterCanvas");
//背景图
wx.getImageInfo({
src: this.data.bgImg,
success: (res) => {
ctx.drawImage(res.path, 0, 0, 550, 800);
this.drawQRCode(ctx);
}
});
ctx.draw();
},
//绘制头像
drawAvatar:function(ctx){
wx.getImageInfo({
src: this.data.avatarUrl,
success: (res) => {
ctx.save();
ctx.beginPath();
ctx.arc(285, 85, 25, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(res.path, 260, 60, 50, 50);
ctx.restore();
}
});
},
//绘制二维码
drawQRCode:function(ctx){
let url = this.data.qrcodeUrl;
wx.getImageInfo({
src: url,
success: (res) => {
ctx.drawImage(res.path, 450, 690, 80, 80);
ctx.draw(false, () => {
wx.canvasToTempFilePath({
canvasId: "posterCanvas",
success: (res) => {
console.log(res.tempFilePath);
}
});
}
);
}
});
}
})
3.3 图片合成，生成小程序海报
有了上面的两个模块，我们就可以把页面渲染成图片，然后实现图片合成，生成小程序海报。上面一切的准备都是为了这一步，因为用canvas绘制一个复杂的海报需要的写代码量非常的大，可以通过分层，先把每个元素渲染成png格式的图片，然后合并起来，从而在代码与绘制效率两方面都大幅提高。接下来，我们依次讲解实现的过程。
// 小程序基础库的版本需求为2.7.0+
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
that.saveImg();
},
fail() {
wx.showModal({
title: '提示',
content: '若不打开权限，则无法将图片保存在相册中！',
success(res) {
if (res.confirm) {
wx.openSetting({});
}
}
});
}
});
} else {
that.saveImg();
}
}
});
// 把图片保存到本地相册中
saveImg: function () {
const wxCanvasToTempFilePath = promisify(wx.canvasToTempFilePath);
wx.showLoading({
title: '生成中',
});
wxCanvasToTempFilePath({
canvasId: 'posterCanvas',
success: (res) => {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
wx.hideLoading();
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000,
});
},
fail: () => {
wx.hideLoading();
wx.showToast({
title: '保存失败',
icon: 'none',
duration: 2000,
});
},
});
},
});
}
4. 总结
上述就是小程序海报得生成的相关技术和方案，同时兼容到了授权、发起ajax、绘制canvas、合成图片等多个小程序的常用技术。虽然生成小程序海报的方法不止这些，但希望这篇文章能给一些有实现要求的童鞋提供做海报的思路。