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://www.cnblogs.com/bangej...
https://yq.aliyun.com/article...
歡迎關注“重度前端”，每週分享技術乾貨，個人感悟
