資訊專欄INFORMATION COLUMN
摘要：有一天張大胖接到了產品的一個需求，需求中涉及到了小程序和兩端。會后大胖對自己所知道的可以把動態(tài)網頁轉成圖片的方案詳細的對比了下相信大家都知道這個，這是一個瀏覽器端的庫，可以把結構轉成圖片。接下來大胖就用了最后的方案，去實施。
有一天張大胖接到了產品的一個需求，需求中涉及到了小程序 和 app 兩端。
主要是基于微信的一個活動，需要在 app 和小程序端生成帶二維碼的圖片，生成圖片是為了讓用戶可以發(fā)到朋友圈。然后用戶長按帶二維碼的圖片就可以進入到小程序了。
大胖想著生成圖片也是后端把多個小圖進行拼接，根本不需要前端搞，前端也搞不了這玩意，太麻煩。
后來對需求的時候，發(fā)現后端可以做但是處理起來很麻煩，需要對每個元素的坐標位置進行計算，然后繪圖，甚是麻煩，而且需要對圖片進行拼接生成，比較耗時。想問下前端能不能實現？
大胖反應倒是快，說前端這個也不好弄，也是需要進行坐標計算和適配，而且我們小程序做了也只能小程序用，那 app 端怎么辦？
后端同學開始了各種討論，能不能簡化下UI，能不能改下展示的布局，盡量好搞一些。
此時大胖呆在一旁，好像在思考什么。他在想有沒有一種通用的方案，不管頁面的多么復雜都可以搞定。突然大胖拍著大腿 “啪” 的一聲，信心滿滿的說，有辦法了，而且頁面不管頁面多復雜都可以搞定。
大胖這個沒心沒肺的，嘴太快了，自己又給自己找事兒干了。因為這個方案實施起來有點復雜。
會后大胖對自己所知道的可以把動態(tài)網頁轉成圖片的方案詳細的對比了下
1. html2canvas相信大家都知道這個，這是一個瀏覽器端的 js 庫，可以把 dom結構轉成圖片。頁面布局隨便寫，但是只能用于瀏覽器端。
2. 后端生成可以讓后端 php、java 等在服務端進行圖片拼接，然后把組合后的圖片地址給到前端。
優(yōu)點是可以做到通用，小程序、app等其他端都可以調用同一個圖片接口。
缺點是服務端處理簡單圖片文字拼接可以，但是如果是針對一個復雜的網頁布局可能就有點力不從心了。
3. 小程序端生成例如微信小程序官方提供了canvas 的相關文檔調用說明，也可以通過計算坐標的方式把圖片和文字畫上去。然后把canvas保存成圖片，再下載到用戶手機。
此方案和后端生成差不多。
4. phantomjs這個庫相信很多同學沒接觸過，但確實真的強大。他就是一個運行在服務端的無界面的瀏覽器。
咱們看看官方怎么介紹的：
PhantomJS是一個基于webkit的JavaScript API。它使用QtWebKit作為它核心瀏覽器的功能，使用webkit來編譯解釋執(zhí)行JavaScript代碼。任何你可以在基于webkit瀏覽器做的事情，它都能做到。它不僅是個隱形的瀏覽器，提供了諸如CSS選擇器、支持Web標準、DOM操作、JSON、HTML5、Canvas、SVG等，同時也提供了處理文件I/O的操作，從而使你可以向操作系統(tǒng)讀寫文件等。PhantomJS的用處可謂非常廣泛，諸如網絡監(jiān)測、網頁截屏、無需瀏覽器的 Web 測試、頁面訪問自動化等。
需要在服務端進行截屏，所以還需要一個可以訪問的h5頁面，另外頁面必須是服務端渲染，最好不要用js渲染，截圖可能有問題。
另外一個在服務端的字體需要預先設置，比如微軟雅黑、 華文蘋方 服務器上如果沒有就需要進行安裝。不然截圖的字體和你的效果圖不一致。
優(yōu)點是 服務端截屏，可以做成通用的服務。
缺點就是 會增加前端同學的工作量，因為需要做服務，還需要做h5頁面布局。當然也看怎么設計架構，如果足夠通用也只需要寫一次就夠了。剩下的就是做h5頁面了，這個就快多了。
看看官網的代碼：
最后
其實服務端生成圖片的方法也不只這兩種，服務端也有很多三方的庫。這里就不多說了，大胖也不是很熟悉。
接下來大胖就用了最后的方案 - PhantomJS，去實施。
他的工作量增加了不少，任務有沒有完成?
PhantomJS有沒有什么坑呢？
咱們下回再說。
朋友們給大胖加油吧。
phantomjs相關參考資料
http://phantomjs.org/
http://www.cnblogs.com/bangej...
https://yq.aliyun.com/article...
歡迎關注“重度前端”，每周分享技術干貨，個人感悟
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/53734.html
摘要：有一天張大胖接到了產品的一個需求，需求中涉及到了小程序和兩端。會后大胖對自己所知道的可以把動態(tài)網頁轉成圖片的方案詳細的對比了下相信大家都知道這個，這是一個瀏覽器端的庫，可以把結構轉成圖片。接下來大胖就用了最后的方案，去實施。 有一天張大胖接到了產品的一個需求，需求中涉及到了小程序 和 app 兩端。 主要是基于微信的一個活動，需要在 app 和小程序端生成帶二維碼的圖片，生成圖片是為了...
摘要：有一天張大胖接到了產品的一個需求，需求中涉及到了小程序和兩端。會后大胖對自己所知道的可以把動態(tài)網頁轉成圖片的方案詳細的對比了下相信大家都知道這個，這是一個瀏覽器端的庫，可以把結構轉成圖片。接下來大胖就用了最后的方案，去實施。 有一天張大胖接到了產品的一個需求，需求中涉及到了小程序 和 app 兩端。 主要是基于微信的一個活動，需要在 app 和小程序端生成帶二維碼的圖片，生成圖片是為了...
摘要：年求職面經及總結我的求職之路差不多走到盡頭了感覺真是精疲力盡了把這大半年的經歷和面試總結寫下來希望能給和我一樣在求職路上煎熬的人一點幫助先說背景微電子科學與工程專業(yè)學過兩門和相關的課程語言和單片機這個專業(yè)的唯一好處就是大部分人并不知道這個專 18年求職面經及總結 我的求職之路差不多走到盡頭了,感覺真是精疲力盡了.把這大半年的經歷和面試總結寫下來,希望能給和我一樣在求職路上煎熬的人一點幫...
摘要：年求職面經及總結我的求職之路差不多走到盡頭了感覺真是精疲力盡了把這大半年的經歷和面試總結寫下來希望能給和我一樣在求職路上煎熬的人一點幫助先說背景微電子科學與工程專業(yè)學過兩門和相關的課程語言和單片機這個專業(yè)的唯一好處就是大部分人并不知道這個專 18年求職面經及總結 我的求職之路差不多走到盡頭了,感覺真是精疲力盡了.把這大半年的經歷和面試總結寫下來,希望能給和我一樣在求職路上煎熬的人一點幫...
閱讀 4319·2021-09-24 09:47
閱讀 1192·2021-09-03 10:33
閱讀 2077·2019-08-30 11:13
閱讀 1039·2019-08-30 10:49
閱讀 1762·2019-08-29 16:13
閱讀 2052·2019-08-29 11:28
閱讀 3102·2019-08-26 13:31
閱讀 3638·2019-08-23 17:14
