SVG画像をjavascriptでpngに変換してダウンロードする方法

D3.jsやflowchart.jsなど、SVGで出力された画像を保存したくなるときが多々あります。
そんなときに使うjavascript。Chromeのデバッガーツールのconsoleから入力するだけでOK。

出力処理

var svg = document.querySelector("svg");
var svgData = new XMLSerializer().serializeToString(svg);
var canvas = document.createElement("canvas");
canvas.width = svg.width.baseVal.value;
canvas.height = svg.height.baseVal.value;

var ctx = canvas.getContext("2d");
var image = new Image;
image.onload = function(){
    ctx.drawImage( image, 0, 0 );
    var a = document.createElement("a");
    a.href = canvas.toDataURL("image/png");
    a.setAttribute("download", "image.png");
    a.dispatchEvent(new MouseEvent("click"));
}
image.src = "data:image/svg+xml;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(svgData))); 

参考

• D3.jsなどで出力されるsvgを画像として表示する方法