之前分享过一篇 PHP 生成海报图像的文章，详情请戳这里>>> WordPress 添加海报分享功能 。该功能是通过 PHP 的 GD 库生成的，由于是后端生成，无疑会增加服务器压力，同时由于部分小伙伴配置服务器的种种问题可能会导致图像生成失败，前端在加载海报图片的过程中同样会由于图片太大导致加载缓慢的问题。由于 HTML 5 中引入 Canvas 元素，我们可以在 JavaScript 中获取 Canvas 元素来生成需要的图片。那么，什么是 Canvas ？
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
关于 Canvas 的使用，可参考 W3CSchool 的这篇文章：https://www.w3school.com.cn/html5/html_5_canvas.asp。
下面说下具体的实现方式：
引入海报生成文件
该文件是根据 Overbool 的工程项目修改的，原项目生成的海报内容个人不太喜欢，实际使用过程中发现几处代码报错，所以修改优化了下，修改的内容挺多的，具体的就不说了。修改之后的内容为：
文末有下载链接，直接下载即可。
配置参数生成海报
生成海报的代码已经封装好了，在网站中引入该 js 文件然后调用即可。配置JS 代码如下：
代码中基本已经注释每个配置项目的含义了，就不再细说了。需要注意的是由于海报中的二维码使用了 jquery 的 qrcode 插件生成，所以你需要确保网页中引入了 jquery.qrcode.min.js 文件。
前端调用弹窗海报
配置好上面步骤后基本上就可以生成海报图片了，但是我们需要将其从前端显示出来，在需要显示的地方添加如下代码即可：
最后放一张生成的海报样式。
