html2canvas學習總結

html2canvas學習總結

文檔鏈接 

功能介紹

該腳本允許您直接在用戶瀏覽器上拍攝網頁或其中一部分的“屏幕截圖”。

屏幕截圖基於DOM，因此可能無法真實表示100％的准確度，因為它無法生成實際的屏幕截圖，而是根據頁面上的可用信息構建屏幕截圖。

安裝

npm 形式

npm install --save html2canvas

script標簽形式

<script src="https://files.cnblogs.com/files/mggahui/html2canvas.min.js"></script>

mini版本下載http://html2canvas.hertzen.com/dist/html2canvas.min.js

使用

html2canvas(element, options)

// element為需要渲染為canvas的dom元素
// options為參數配置選項

options參數配置如下

名稱	默認值	描述
allowTaint	false	是否允許跨域圖像污染畫布（默認不允許渲染跨域圖片）
backgroundColor	#ffffff	canvas畫布背景色（如果未在DOM中指定）。設置null為透明
canvas	null	使用現有canvas元素用作繪圖的基礎，即在該canvas基礎上繼續渲染我們的element
foreignObjectRendering	false	如果瀏覽器支持，是否使用ForeignObject渲染
imageTimeout	15000	加載圖像的超時時間（以毫秒為單位）。設置0為禁用超時。
ignoreElements	(element) => false	謂詞功能，可從渲染中刪除匹配的元素。
logging	true	啟用日志以進行調試
onclone	null	克隆文檔以進行渲染時調用的回調函數可用於修改將要渲染的內容，而不會影響原始源文檔。onclone回調函數返回復制的文檔根節點document，onclone：(doc)=>{}
proxy	null	用於加載跨域圖像的代理的網址。如果保留為空，則不會加載跨域圖像。
removeContainer	true	是否清除HTML2canvas臨時創建的克隆DOM元素
scale	window.devicePixelRatio	用於渲染的縮放比。默認為瀏覽器設備像素比率。
useCORS	false	是否嘗試使用CORS從服務器加載圖像
width	element width	canvas畫布的寬度
height	element width	canvas畫布的高度
x	element x-offset	裁剪畫布X坐標
y	element y-offset	裁剪畫布y坐標
scrollX	element scrollX	渲染元素時要使用的x滾動位置（例如，如果Element使用position: fixed）
scrollY	element scrollY	渲染元素時要使用的y滾動位置（例如，如果Element使用position: fixed）
windowWidth	window.innerWidth	渲染Element時要使用的窗口寬度，這可能會影響媒體查詢之類的內容
windowHeight	window.innerHeight	渲染Element時要使用的窗口高度，這可能會影響媒體查詢之類的內容

 

 如果希望從渲染中排除某些Elements，則可以data-html2canvas-ignore向這些元素添加屬性，並且html2canvas會將它們從渲染中排除。

 

（以上圖片為當前博客使用html2canvas保存為圖片效果，右鍵新標簽頁打開查看效果）

示例代碼

    function canvasToImg(canvas) {
        var a_link = document.createElement("a");
        a_link.href = canvas.toDataURL("image/png");
        a_link.download = new Date().getTime() + ".png";
        a_link.click();
    }
    html2canvas(document.body, {
        allowTaint: true,
        useCORS: true,
    }).then(canvas => {
        canvasToImg(canvas)
    });

使用如上示例代碼將當前博客文章轉為png圖片並保存。（可以將上述代碼復制到console控制台執行查看保存效果）

 

對比網頁和圖片我們發現，以下幾個問題

①，網頁上部分圖片資源沒有渲染出來（配置參數使用了）

②，table內的長單詞（window.devicePixelRatio）在渲染的圖片中沒有換行 ，但是長文本會換行

③，部分 css 特效樣式並不兼容（css特性支持清單）

④，頁面左下方的音樂播放 svg 圖標沒有被渲染出來

 

踩坑參考鏈接

移動端 html2canvas 踩坑記錄

使用html2canvas在前端生成圖片

微信wap頁生成分享海報功能踩坑經驗

 

 

@萍2櫻釋ღ( ´･ᴗ･` )