給HTML拍個照（如何將html元素轉成圖片）

本文主要介紹一款好用的庫，如何將HTML生成圖片。

1、簡述

最近在做的項目中，需要將界面轉換成模板保存下來，本來想使用自適應布局完成，但是頁面較復雜，模板較多，生成的模板使用過多的HTML標簽，於是想着能否將HTML生成圖片，保存及獲取的時候直接使用圖片，於是網上查了下，發現已經有人做好了輪子：html2canvas.js，直接拿來滾滾就好啦~

2、使用

安裝

npm install html2canvas --save-dev

html轉為canvas

html2canvas.js可將html元素渲染為 canvas，這里只需調用 html2canvas(element[, options]) 即可。

    html2canvas(document.body).then(function(canvas) {
        document.body.appendChild(canvas);
    });

canvas轉image

基於原生canvas的 toDataURL 方法可以將 canvas 輸出為data: URI類型的圖片地址，再將該圖片地址賦值給元素的src屬性即可~

html2canvas($dom, {
    useCORS: true, // 【重要】開啟跨域配置
    scale: 2, // canvas放大倍數，增加圖片的清晰度
    logging: false // 是否開啟日志
}).then(canvas => {
    let imageSrc = canvas.toDataURL("image/png");
})

也可以使用第三方庫Canvas2Image.js，調用其 convertToJPEG 方法即可。它也是基於canvas.toDataURL的封裝，相比原生的canvas API對於轉為圖片的功能上考慮更為具體適合在項目中使用。

html2canvas($dom).then(canvas => {
    let imageSrc = canvas2Image.convertToJPEG(canvas, 100, 100).getAttribute('src');
})

一個坑

canvas對於圖片資源的請求有 同源限制，如果畫布中包含跨域的圖片資源則會污染畫布，造成含有圖片的部分一片空白，因此必須使用同源的圖片哦~