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、HTML五、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...

歡迎關注「重度前端」，每週分享技術乾貨，我的感悟