2013-09-19

JavaScriptでsvgをpngに変換して保存する

JavaScript d3.js

d3.jsで作ったsvgをpngに変換して保存する方法。

1.svgをcanvasに描画。

GitHub - canvg/canvg: Javascript SVG parser and renderer on Canvas

canvg("canvas", "<svg>...</svg>" );

2.canvasをtoDataURL()で、Base64 エンコードした文字列に変換。

toDataURL() メソッド - Canvasリファレンス - HTML5.JP

var png = document.getElementById("canvas").toDataURL();

3.pngとして保存。

いろいろ方法があるみたい。
chrome, firefoxではa要素にdownload属性をつけるとうまく1clickで保存できるので、無理やりリンクを生成してclickイベントを発生させている。

dot mapで使ったコード

$("#save-png").click(function(){
	$("#map").hide();
	$("#map-container").append(
	    '<canvas id="canvas" width="' + width + 'px" height="' + height + 'px"></canvas>'
	);
	canvg("canvas", $("#map").html() );

	var png = $("#canvas")[0].toDataURL("image/png");
	png = png.replace("image/png", "application/octet-stream");

	$("#map-container").append(
	    '<a id="png" type="application/octet-stream" href=""　download="dotmap.png">saving...</a>'
	);
	$("#png").attr("href", png);
	$("#png")[0].click();

	$("#map").show();
	$("#canvas").remove();
	$("#png").remove();
});