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

Posted: , Modified:   HTML5 JSON d3 JavaScript CoffeeScript Qiita

本稿は Qiita 投稿記事 のバックアップです．

はじめに

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版)

参考