国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

balabala: dom 轉(zhuǎn)圖片場(chǎng)景和技術(shù)方案

legendaryedu / 2635人閱讀

摘要：有一天張大胖接到了產(chǎn)品的一個(gè)需求，需求中涉及到了小程序和兩端。會(huì)后大胖對(duì)自己所知道的可以把動(dòng)態(tài)網(wǎng)頁(yè)轉(zhuǎn)成圖片的方案詳細(xì)的對(duì)比了下相信大家都知道這個(gè)，這是一個(gè)瀏覽器端的庫(kù)，可以把結(jié)構(gòu)轉(zhuǎn)成圖片。接下來(lái)大胖就用了最后的方案，去實(shí)施。

有一天張大胖接到了產(chǎn)品的一個(gè)需求，需求中涉及到了小程序 和 app 兩端。

主要是基于微信的一個(gè)活動(dòng)，需要在 app 和小程序端生成帶二維碼的圖片，生成圖片是為了讓用戶可以發(fā)到朋友圈。然后用戶長(zhǎng)按帶二維碼的圖片就可以進(jìn)入到小程序了。

大胖想著生成圖片也是后端把多個(gè)小圖進(jìn)行拼接，根本不需要前端搞，前端也搞不了這玩意，太麻煩。

后來(lái)對(duì)需求的時(shí)候，發(fā)現(xiàn)后端可以做但是處理起來(lái)很麻煩，需要對(duì)每個(gè)元素的坐標(biāo)位置進(jìn)行計(jì)算，然后繪圖，甚是麻煩，而且需要對(duì)圖片進(jìn)行拼接生成，比較耗時(shí)。想問(wèn)下前端能不能實(shí)現(xiàn)？

大胖反應(yīng)倒是快，說(shuō)前端這個(gè)也不好弄，也是需要進(jìn)行坐標(biāo)計(jì)算和適配，而且我們小程序做了也只能小程序用，那 app 端怎么辦？

后端同學(xué)開始了各種討論，能不能簡(jiǎn)化下UI，能不能改下展示的布局，盡量好搞一些。

此時(shí)大胖呆在一旁，好像在思考什么。他在想有沒(méi)有一種通用的方案，不管頁(yè)面的多么復(fù)雜都可以搞定。突然大胖拍著大腿 “啪” 的一聲，信心滿滿的說(shuō)，有辦法了，而且頁(yè)面不管頁(yè)面多復(fù)雜都可以搞定。

大胖這個(gè)沒(méi)心沒(méi)肺的，嘴太快了，自己又給自己找事兒干了。因?yàn)檫@個(gè)方案實(shí)施起來(lái)有點(diǎn)復(fù)雜。

會(huì)后大胖對(duì)自己所知道的可以把動(dòng)態(tài)網(wǎng)頁(yè)轉(zhuǎn)成圖片的方案詳細(xì)的對(duì)比了下

1. html2canvas

相信大家都知道這個(gè)，這是一個(gè)瀏覽器端的 js 庫(kù)，可以把 dom結(jié)構(gòu)轉(zhuǎn)成圖片。頁(yè)面布局隨便寫，但是只能用于瀏覽器端。

2. 后端生成

可以讓后端 php、java 等在服務(wù)端進(jìn)行圖片拼接，然后把組合后的圖片地址給到前端。

優(yōu)點(diǎn)是可以做到通用，小程序、app等其他端都可以調(diào)用同一個(gè)圖片接口。

缺點(diǎn)是服務(wù)端處理簡(jiǎn)單圖片文字拼接可以，但是如果是針對(duì)一個(gè)復(fù)雜的網(wǎng)頁(yè)布局可能就有點(diǎn)力不從心了。

3. 小程序端生成

例如微信小程序官方提供了canvas 的相關(guān)文檔調(diào)用說(shuō)明，也可以通過(guò)計(jì)算坐標(biāo)的方式把圖片和文字畫上去。然后把canvas保存成圖片，再下載到用戶手機(jī)。

此方案和后端生成差不多。

4. phantomjs

這個(gè)庫(kù)相信很多同學(xué)沒(méi)接觸過(guò)，但確實(shí)真的強(qiáng)大。他就是一個(gè)運(yùn)行在服務(wù)端的無(wú)界面的瀏覽器。

咱們看看官方怎么介紹的：

PhantomJS是一個(gè)基于webkit的JavaScript API。它使用QtWebKit作為它核心瀏覽器的功能，使用webkit來(lái)編譯解釋執(zhí)行JavaScript代碼。任何你可以在基于webkit瀏覽器做的事情，它都能做到。它不僅是個(gè)隱形的瀏覽器，提供了諸如CSS選擇器、支持Web標(biāo)準(zhǔn)、DOM操作、JSON、HTML5、Canvas、SVG等，同時(shí)也提供了處理文件I/O的操作，從而使你可以向操作系統(tǒng)讀寫文件等。PhantomJS的用處可謂非常廣泛，諸如網(wǎng)絡(luò)監(jiān)測(cè)、網(wǎng)頁(yè)截屏、無(wú)需瀏覽器的 Web 測(cè)試、頁(yè)面訪問(wèn)自動(dòng)化等。

需要在服務(wù)端進(jìn)行截屏，所以還需要一個(gè)可以訪問(wèn)的h5頁(yè)面，另外頁(yè)面必須是服務(wù)端渲染，最好不要用js渲染，截圖可能有問(wèn)題。

另外一個(gè)在服務(wù)端的字體需要預(yù)先設(shè)置，比如微軟雅黑、 華文蘋方 服務(wù)器上如果沒(méi)有就需要進(jìn)行安裝。不然截圖的字體和你的效果圖不一致。

優(yōu)點(diǎn)是 服務(wù)端截屏，可以做成通用的服務(wù)。

缺點(diǎn)就是 會(huì)增加前端同學(xué)的工作量，因?yàn)樾枰龇?wù)，還需要做h5頁(yè)面布局。當(dāng)然也看怎么設(shè)計(jì)架構(gòu)，如果足夠通用也只需要寫一次就夠了。剩下的就是做h5頁(yè)面了，這個(gè)就快多了。

看看官網(wǎng)的代碼：

最后

其實(shí)服務(wù)端生成圖片的方法也不只這兩種，服務(wù)端也有很多三方的庫(kù)。這里就不多說(shuō)了，大胖也不是很熟悉。

接下來(lái)大胖就用了最后的方案 - PhantomJS，去實(shí)施。

他的工作量增加了不少，任務(wù)有沒(méi)有完成?

PhantomJS有沒(méi)有什么坑呢？

咱們下回再說(shuō)。

朋友們給大胖加油吧。

phantomjs相關(guān)參考資料

http://phantomjs.org/

http://www.cnblogs.com/bangej...

https://yq.aliyun.com/article...

歡迎關(guān)注“重度前端”，每周分享技術(shù)干貨，個(gè)人感悟

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/117426.html

相關(guān)文章

  • balabala: dom 轉(zhuǎn)圖片場(chǎng)景和技術(shù)方案

    摘要：有一天張大胖接到了產(chǎn)品的一個(gè)需求，需求中涉及到了小程序和兩端。會(huì)后大胖對(duì)自己所知道的可以把動(dòng)態(tài)網(wǎng)頁(yè)轉(zhuǎn)成圖片的方案詳細(xì)的對(duì)比了下相信大家都知道這個(gè)，這是一個(gè)瀏覽器端的庫(kù)，可以把結(jié)構(gòu)轉(zhuǎn)成圖片。接下來(lái)大胖就用了最后的方案，去實(shí)施。 有一天張大胖接到了產(chǎn)品的一個(gè)需求，需求中涉及到了小程序 和 app 兩端。 主要是基于微信的一個(gè)活動(dòng)，需要在 app 和小程序端生成帶二維碼的圖片，生成圖片是為了...

    whatsns 評(píng)論0 收藏0

  • balabala: dom 轉(zhuǎn)圖片場(chǎng)景和技術(shù)方案

    摘要：有一天張大胖接到了產(chǎn)品的一個(gè)需求，需求中涉及到了小程序和兩端。會(huì)后大胖對(duì)自己所知道的可以把動(dòng)態(tài)網(wǎng)頁(yè)轉(zhuǎn)成圖片的方案詳細(xì)的對(duì)比了下相信大家都知道這個(gè)，這是一個(gè)瀏覽器端的庫(kù)，可以把結(jié)構(gòu)轉(zhuǎn)成圖片。接下來(lái)大胖就用了最后的方案，去實(shí)施。 有一天張大胖接到了產(chǎn)品的一個(gè)需求，需求中涉及到了小程序 和 app 兩端。 主要是基于微信的一個(gè)活動(dòng)，需要在 app 和小程序端生成帶二維碼的圖片，生成圖片是為了...

    vpants 評(píng)論0 收藏0

  • 18年求職面經(jīng)及總結(jié)

    摘要：年求職面經(jīng)及總結(jié)我的求職之路差不多走到盡頭了感覺(jué)真是精疲力盡了把這大半年的經(jīng)歷和面試總結(jié)寫下來(lái)希望能給和我一樣在求職路上煎熬的人一點(diǎn)幫助先說(shuō)背景微電子科學(xué)與工程專業(yè)學(xué)過(guò)兩門和相關(guān)的課程語(yǔ)言和單片機(jī)這個(gè)專業(yè)的唯一好處就是大部分人并不知道這個(gè)專 18年求職面經(jīng)及總結(jié) 我的求職之路差不多走到盡頭了,感覺(jué)真是精疲力盡了.把這大半年的經(jīng)歷和面試總結(jié)寫下來(lái),希望能給和我一樣在求職路上煎熬的人一點(diǎn)幫...

    zhangwang 評(píng)論0 收藏0

  • 18年求職面經(jīng)及總結(jié)

    摘要：年求職面經(jīng)及總結(jié)我的求職之路差不多走到盡頭了感覺(jué)真是精疲力盡了把這大半年的經(jīng)歷和面試總結(jié)寫下來(lái)希望能給和我一樣在求職路上煎熬的人一點(diǎn)幫助先說(shuō)背景微電子科學(xué)與工程專業(yè)學(xué)過(guò)兩門和相關(guān)的課程語(yǔ)言和單片機(jī)這個(gè)專業(yè)的唯一好處就是大部分人并不知道這個(gè)專 18年求職面經(jīng)及總結(jié) 我的求職之路差不多走到盡頭了,感覺(jué)真是精疲力盡了.把這大半年的經(jīng)歷和面試總結(jié)寫下來(lái),希望能給和我一樣在求職路上煎熬的人一點(diǎn)幫...

    fjcgreat 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<