html2Canvas是 "腳本允許您直接在用戶瀏覽器上截取網(wǎng)頁或部分網(wǎng)頁的“屏幕截圖”拳锚。屏幕截圖基于DOM，"附上詳解地址：http://html2canvas.hertzen.com/documentation射亏，github地址：https://github.com/niklasvh/html2canvas
html2canvas的兼容性如下圖1.1：
我是在react上使用html2canvas,用法如下：
html2canvas(document.body).then(function(canvas){document.body.appendChild(canvas);});這是官方給的用法厕倍，
實例如圖1.2：
獲取DOM節(jié)點，通過toDataURL,獲取base64鏈接衫生，可以把鏈接賦值給創(chuàng)建的a標(biāo)簽下載视粮，如圖1.3所示
添加點擊事件细办，因為火狐瀏覽器和常規(guī)瀏覽器的點擊事件不同，所以要增加判斷瀏覽器和方法蕾殴，如圖1.4：
因為IE瀏覽器不支持base64的下載方式蟹腾，所以這里還要兼容IE,可以直接判斷是否為IE，直接獲取blob,然后保存区宇，代碼如圖1.5所示：
window.navigator.msSaveBlob(blob,name)在IE上可以直接保存下載娃殖，因為開始想的是base64轉(zhuǎn)blob,然后賦值給a標(biāo)簽的href,雖然方法可行，也可以保存议谷，但是圖片顯示文件系統(tǒng)損壞炉爆，所以就找到了上面的方法，直接轉(zhuǎn)blob,在這里還要提一下關(guān)于base64轉(zhuǎn)blob的方法卧晓，代碼如圖1.6：
new Blob([放入base64鏈接])芬首，url方法是將blob轉(zhuǎn)成鏈接賦值給a標(biāo)簽下載，再次提醒一點逼裆，如果在IE上下載創(chuàng)建a標(biāo)簽的話郁稍，一定要帶上target屬性，不然無法正常下載胜宇，還不會報錯.
當(dāng)所截圖片超出屏幕范圍的時候耀怜，用上面的方法就無法全部截取恢着，這個時候就需要給索要截取的DOM添加一些屬性，代碼如圖1.7：
nodeImage,是要所截圖的DOM節(jié)點财破，當(dāng)所截圖片不能填滿DOM掰派，截圖之后會使內(nèi)容移位，所以這個時候要加上判斷左痢，當(dāng)超出部分寬度或者高度大于本身高度時靡羡，加上絕對定位的屬性，要記得給DOM節(jié)點一個相對定位俊性，當(dāng)內(nèi)容超出時就可以全部截圖成功略步。個人拙見，不吝賜教定页。
