Edited at

svg 要素を png 形式の画像に変換する

More than 3 years have passed since last update.


はじめに

D3.js で作成した svg 要素を png 形式の画像に変換する方法.注意事項として,svg 要素の大きさ (width と height) が絶対値で指定されてないといけない(つまり 100% などでは駄目).また、テキスト要素にフォントを指定する必要がある.

フォントの指定の例

obj.attr("font-family", "sans-serif")

.attr("font-size", "14px")
.attr("fill", "black")


実際の変換

方針は,svg 要素の中身をデータ URI スキームで表し,canvas 要素に読み込ませる.

// #svg1: ターゲットの svg 要素

var width = $("#svg1").width()
var height = $("#svg1").height()
$("body").append("<canvas id='canvas1' class='hidden' width="
+ width + " height=" + height +"></canvas>")

var canvas = $("#canvas1")[0]
var ctx = canvas.getContext("2d")

var svg = $("#svg1")
svg.attr("viewBox", "0 0 " + width + " " + height)

var data = new XMLSerializer().serializeToString(svg[0])
var imgsrc = "data:image/svg+xml;charset=utf-8;base64,"
+ btoa(unescape(encodeURIComponent(svgData)))
var image = new Image()
image.onload = function(){

ctx.drawImage(image, 0, 0);
// Optional: 自動でダウンロードさせる場合
$("body").append("<a id='image-file' class='hidden' type='application/octet-stream' href='"
+ canvas.toDataURL("image/png") + "' download='graph.png'>Donload Image</a>")
$("#image-file")[0].click()

// 後処理
$("#canvas1").remove()
$("#image-file").remove()

}
image.src = imgsrc;

(CoffeeScript版)


参考