凱開 x 慵懶日子

官網：https://html2canvas.hertzen.com/

其實官網就有介紹如何使用了，html要有那個元素，JS再去選他並將它產生

就我自己覺得，就是自己弄好某個div的畫面，然後再使用這個套件讓他變成圖。

//html

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

//JS

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

其他延伸，本機端下載 / 傳給server儲存圖片

我主要是想要把前端使用d3.js繪圖再轉成圖檔

本機端下載

使用情境：在產圖的時候，順便下載到本機端

html2canvas(document.querySelector(#capture)).then(canvas => {
    saveAs(canvas.toDataURL("./images"), 'canvas.png');
});

function saveAs(uri, filename) {
    var link = document.createElement('a');
    if (typeof link.download === 'string') {
        link.href = uri;
        link.download = filename;

        document.body.appendChild(link);

        link.click();

        document.body.removeChild(link);

    } else {
        window.open(uri);
    }
}

傳給sever

但傳給server我是傳送base64格式

使用情境：前端傳送圖片base64格式，後端將編碼轉成圖片儲存

html2canvas(document.querySelector(#capture)).then(function(canvas){
    let canvas_data = canvas.toDataURL();//產生 base64
    //再將canvas_data傳給後端的值()
});

後端要把base64轉成圖片存檔

因為同事是寫Django，所以找了這個網址給他用

參考：Django: Save Screenshot of a Webpage

遇到問題

因為我一次要傳好幾張圖，發現用html2canvas.js太慢了，

所以後來用了其他的套件(saveSvgAsPng.js)，但這個套件是專門for svg的樣子嗚嗚

參考資料

透過JavaScript將HTML轉為圖檔

Download html2canvas image to desktop