html2canvas如何在元素隱藏的狀況下生成截圖

html2canvas官網地址：http://html2canvas.hertzen.com/

github地址：https://github.com/niklasvh/html2canvas/

從官網能夠看出它的使用方法很容易：

項目中的需求是須要將2張圖片（1背景圖+2生成的二維碼）和1段文字（3店鋪的名稱）總體合成一張圖片，看下面的圖片應該有助於理解：

 動態圖以下：

 

咱們能夠看出，在使用過程當中，須要合成圖片的那段代碼是隱藏的。這時，有個問題就是隱藏的代碼是沒法生成截圖的。最開始是想從js下手，自身能力有限，作不到讓它在隱藏的狀況下截圖。轉念能夠從css下手。咱們要達到的效果無非就是讓這一塊區域看不見，脫離文檔流，不佔空間。我相信經過我這樣描述，你們可能知道該如何作了。

就是咱們把那一塊須要生成截圖的區域樣式設置爲{position:fixed;opacity:0;}，而後在生成截圖以後把這段代碼給移除掉。爲了用戶體驗更好，咱們能夠在生成圖片的時候中間加一個過渡的動畫。等圖片生成完以後將過渡動畫移除掉。大概思路就是這樣子了，若是個人文字描述仍是讓你一臉懵逼的話，直接看下面的截圖：

總體截圖及說明以下：

 

HTML截圖以下：

 

主要CSS截圖以下：

 

主要js代碼以下：

 

把a連接加一個download的屬性就能夠實現點擊直接下載該圖片了。

 

 

給能看到結尾的你點個贊。在寫的過程當中，感受都不知道本身要如何把事情給描述清楚明白。。。要說的就這些了~但願能幫到各位看官~~若有疑問歡迎留言，如有更好的方法，但願各位不吝賜教哇~~