某天张大发接到一个产品需求，既涉及小程序，也涉及app。主要是基于微信的活动。需要在app端和小程序端生成带二维码的图片。生成图片的目的是让用户发朋友圈。然后用户可以长按带有二维码的图片进入小程序。大胖认为生成图片就是在后端拼接多个小图片。没必要前端做，前端做不了，太麻烦了。后来看需求的时候，发现后端可以做但是处理起来很麻烦。计算每个元素的坐标位置，然后绘制，非常麻烦。此外，拼接和生成图片非常耗时。请问前端是否可以实现？大胖反应很快，说前端不好搞，还需要坐标计算和适配，而我们的小程序只能给小程序用，那app端呢？后端同学开始各种讨论，能不能简化UI，能不能改变显示的布局，尽量简单。这时候，胖子呆在一旁，似乎在思考着什么。他在想有没有一个通用的解决办法，不管页面多复杂，都可以搞定。顿时大胖“啪”的一声拍了拍自己的大腿，自信地说有办法，再复杂的页面也能搞定。大胖没心没肺，嘴巴太快了，给自己找事做。因为这个方案实现起来有点复杂。会后，胖子对自己知道的可以将动态网页转为图片的方案进行了详细的比较。1、关于html2canvas这个相信大家都知道吧。这是一个浏览器端的js库，可以将dom结构转换成图片。页面布局可以随便写，但是只能用在浏览器端。2、后端生成可以让后端php、java等在服务器上拼接图片，然后把拼接后的图片地址给前端。优点是可以通用，小程序、app等其他终端可以调用同一个图片接口。缺点是服务器可以处理简单的图文拼接，但是对于复杂的网页布局可能有点力不从心。3、小程序生成。比如微信小程序官方提供了canvas的相关文档调用说明，也可以通过计算坐标在上面绘制图片和文字。然后将画布保存为图片，下载到用户手机上。此解决方案类似于后端生成。4.phantomjs库相信很多同学都没有接触过，但是它确实很强大。他是一个运行在服务器端的没有界面的浏览器。来看看官方是怎么介绍的：PhantomJS是一个基于webkit的JavaScriptAPI。它以QtWebKit作为核心浏览器功能，使用webkit编译、解释和执行JavaScript代码。您在基于webkit的浏览器中可以做的任何事情，它都可以做到。它不仅是一个隐形浏览器，还提供了CSS选择器等操作，支持web标准，DOM操作，JSON，HTML5，Canvas，SVG等操作，读写文件等。PhantomJS有着广泛的用途，比如网络监控，网页截图，无浏览器web测试，页面访问自动化等。需要在服务器端进行截图，所以也需要一个可访问的h5页面。此外，页面必须在服务器端呈现。最好不要用js渲染，可能截图有问题。另一种服务器上的字体需要预先设置好，比如微软雅黑、中文苹方，如果服务器上没有，需要安装。否则，屏幕截图中的字体与您的渲染不一致。好处是服务端截图可以做成通用服务。缺点是会增加前端同学的工作量，因为需要服务和h5页面布局。当然，这也取决于如何设计架构。如果足够通用，只需要写一次。剩下的就是做h5页面了，这样就快多了。看官网上的代码：到头来，服务端生成图片的方法不止这两种，服务端还有很多第三方库。这里就不多说了，胖子也不是很熟悉。接下来，大胖使用了最终的解决方案——PhantomJS来实现。他的工作量增加了不少，任务完成了吗？PhantomJS有什么陷阱吗？下次再说吧。朋友们为大胖加油。phantomjs相关参考http://phantomjs.org/http://www.cnblogs.com/bangej...https://yq.aliyun.com/article...欢迎关注“重前端”和每周分享技术干货，个人感悟
