balabala: dom 转图片场景和技术方案

有一天张大胖接到了产品的一个需求，需求中涉及到了小程序 和 app 两端。

主要是基于微信的一个活动，需要在 app 和小程序端生成带二维码的图片，生成图片是为了让用户可以发到朋友圈。然后用户长按带二维码的图片就可以进入到小程序了。

大胖想着生成图片也是后端把多个小图进行拼接，根本不需要前端搞，前端也搞不了这玩意，太麻烦。

后来对需求的时候，发现后端可以做但是处理起来很麻烦，需要对每个元素的坐标位置进行计算，然后绘图，甚是麻烦，而且需要对图片进行拼接生成，比较耗时。想问下前端能不能实现？

大胖反应倒是快，说前端这个也不好弄，也是需要进行坐标计算和适配，而且我们小程序做了也只能小程序用，那 app 端怎么办？

后端同学开始了各种讨论，能不能简化下UI，能不能改下展示的布局，尽量好搞一些。

此时大胖呆在一旁，好像在思考什么。他在想有没有一种通用的方案，不管页面的多么复杂都可以搞定。突然大胖拍着大腿 “啪” 的一声，信心满满的说，有办法了，而且页面不管页面多复杂都可以搞定。

大胖这个没心没肺的，嘴太快了，自己又给自己找事儿干了。因为这个方案实施起来有点复杂。

会后大胖对自己所知道的可以把动态网页转成图片的方案详细的对比了下

1. html2canvas

相信大家都知道这个，这是一个浏览器端的 js 库，可以把 dom结构转成图片。页面布局随便写，但是只能用于浏览器端。

2. 后端生成

可以让后端 php 、 java 等在服务端进行图片拼接，然后把组合后的图片地址给到前端。

优点是可以做到通用，小程序、app等其他端都可以调用同一个图片接口。

缺点是服务端处理简单图片文字拼接可以，但是如果是针对一个复杂的网页布局可能就有点力不从心了。

3. 小程序端生成

例如微信小程序官方提供了canvas 的相关文档调用说明，也可以通过计算坐标的方式把图片和文字画上去。然后把canvas保存成图片，再下载到用户手机。

此方案和后端生成差不多。

4. phantomjs

这个库相信很多同学没接触过，但确实真的强大。他就是一个运行在服务端的无界面的浏览器。

咱们看看官方怎么介绍的：

PhantomJS是一个基于webkit的JavaScript API。它使用QtWebKit作为它核心浏览器的功能，使用webkit来编译解释执行JavaScript代码。任何你可以在基于webkit浏览器做的事情，它都能做到。它不仅是个隐形的浏览器，提供了诸如CSS选择器、支持Web标准、DOM操作、JSON、HTML5、Canvas、SVG等，同时也提供了处理文件I/O的操作，从而使你可以向操作系统读写文件等。PhantomJS的用处可谓非常广泛，诸如网络监测、网页截屏、无需浏览器的 Web 测试、页面访问自动化等。

需要在服务端进行截屏，所以还需要一个可以访问的h5页面，另外页面必须是服务端渲染，最好不要用js渲染，截图可能有问题。

另外一个在服务端的字体需要预先设置，比如微软雅黑、 华文苹方 服务器上如果没有就需要进行安装。不然截图的字体和你的效果图不一致。

优点是 服务端截屏，可以做成通用的服务。

缺点就是 会增加前端同学的工作量，因为需要做服务，还需要做h5页面布局。当然也看怎么设计架构，如果足够通用也只需要写一次就够了。剩下的就是做h5页面了，这个就快多了。

看看官网的代码：

最后

其实服务端生成图片的方法也不只这两种，服务端也有很多三方的库。这里就不多说了，大胖也不是很熟悉。

接下来大胖就用了最后的方案 - PhantomJS，去实施。

他的工作量增加了不少，任务有没有完成?

PhantomJS有没有什么坑呢？

咱们下回再说。

朋友们给大胖加油吧。

phantomjs相关参考资料

http://phantomjs.org/

http://www.cnblogs.com/bangej...

https://yq.aliyun.com/article...

欢迎关注“重度前端”，每周分享技术干货，个人感悟