web開(kāi)發(fā)過(guò)程中，常常因?yàn)闉榱艘驗(yàn)楫a(chǎn)品想突出自己的產(chǎn)品，所以分享海報(bào)，保存圖片是常用的需求；那么自然就會(huì)想到能不能把常見(jiàn)的h5頁(yè)面轉(zhuǎn)換成圖片；這樣不僅可以滿足要求，也能借助瀏覽器的能力長(zhǎng)按保存等。

html2canvas?就是這樣的一個(gè)很好的組件。詳見(jiàn)其官網(wǎng)。

其api很簡(jiǎn)單，但是真的很實(shí)用：

官網(wǎng)圖

具體api這邊就不多說(shuō)了，官網(wǎng)的解釋也很明確。

于是就對(duì)其做了一些嘗試；話不多說(shuō)，直接上代碼：

Component 組件：?

html

CSS部分：

less

JS部分：

運(yùn)行的頁(yè)面效果：

頁(yè)面效果圖

然后我們點(diǎn)擊原圖，通過(guò)html2canvas;生成一個(gè)對(duì)應(yīng)的canvas，效果如下：

canvas

從效果來(lái)看，算是大功告成了，是不是很簡(jiǎn)單~ 但是仔細(xì)點(diǎn)看的話，會(huì)發(fā)現(xiàn)文字還行；但是圖片和圖片上的字明顯有一些模糊了。然后產(chǎn)品說(shuō)還要優(yōu)化。

從網(wǎng)上搜一搜，發(fā)現(xiàn)很多人也有類(lèi)似的困擾。也有相應(yīng)的嘗試；總結(jié)下來(lái)有：

方法1：自定義api中的canvas屬性：

自定義api中的canvas屬性

然后發(fā)現(xiàn)圖片模糊的問(wèn)題還是依舊；然后繼續(xù)探索；

方法2：修改源碼完善，比如這個(gè)大牛：

源碼地址：https://github.com/eKoopmans/html2canvas/tree/develop/dist

新增了一個(gè)dpi屬性。

方法3：從官網(wǎng)文檔來(lái)看，其實(shí)在轉(zhuǎn)換的時(shí)候，對(duì)一些css樣式不是都是支持的；但是我這邊的banner是用的background，應(yīng)該算支持的吧~ 所以嘗試把背景圖換成用img的方式；驚奇的發(fā)現(xiàn)，果不其然，圖片也不模糊了。

篇幅很少；只是簡(jiǎn)單記錄。