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