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)容超出時就可以全部截圖成功略步。個人拙見,不吝賜教定页。