凱開 x 慵懶日子

saveSvgAsPng.js

本來是使用html2canvas，但因為真的太慢了。後來使用這個saveSvgAsPng.js

但兩種各有好壞就是了。【html2canvas.js】將html轉成圖檔

因為使用saveSvgAsPng.js，所以我把裡面內容全部改成svg

//轉成base64傳給後端，是使用svgAsDataUri function

<div id="test">
    <svg><!--D3內容--></svg>
</div>

svgAsDataUri(document.querySelector("#test svg"), {}, function(uri) {
    var img = new Image()
    img.src = uri;
    var canvas = document.createElement('canvas');
    canvas.width = 500;
    canvas.height = 320;
    var content = canvas.getContext('2d');
    img.onload = function(){
        content.drawImage(img, 0, 0);
        let canvas_data = canvas.toDataURL();//產生 base64
        //再將canvas_data傳給後端的值()
    });
});

遇到問題

我畫的D3圖背景使用

svg.style("background-color", "#FFF")

網頁可以看到，結果轉出來竟然沒有背景圖QQ

結果只好再加上一個方塊圖轉出來就有背景圖

 svg.append("rect")
    .attr("width", 500)
    .attr("height", 320)
    .attr("fill", "white");

但使用到style的字體就不知道該怎麼辦了，嗚嗚嗚

參考資料

d3画的图或者svg图转base64编码格式