有一天张大胖接到了产物的一个需求，需求中触及到了小顺序 和 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…

迎接关注“重度前端”，每周分享手艺干货，个人感悟