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

D3.js(http://d3js.org/ )などで出力されるsvg要素を画像として使いたくなったので、d3.jsでsvgとして表示し、javascriptでsvgデータをbase64形式にして保存し、base64形式の画像データを画面上に表示する方法をまとめました。

【手順】

1. データをD3.jsを使ってグラグフィカルに表示する
2. 出力されたsvg要素を画像に変換して保存する(※今回はbase64にして保存にしました)
3. 画像として保存したデータを表示する

という三段階でやり方をまとめてみました。

---

1.については、たくさん種類があるのでD3.jsのexampleページを参考にしてみてください。

2.出力されたsvg要素を画像に変換して保存する

svg_to_png.js

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

var ctx = canvas.getContext( "2d" );
imgsrc = "data:image/svg+xml;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(svgData))); //svgデータをbase64に変換
img.attr( "src", imgsrc );
var image = new Image;
image.src = imgsrc;
image.onload = function() {
  ctx.drawImage( image, 0, 0 );
  var canvasdata = canvas.toDataURL("image/png");

  $.ajax({
    method: "post",
    url: "/api/save_photo_as_png",
    data: "data="+canvasdata.replace(/^.*,/, ''),
    success: function(data,status){
      //ここには保存に成功したときの動きを実装
    }                                                                                                                           
  });
};

app/controllers/api_controller.rb

def save_photo_as_png
  photo = Photo.create(user_id: user.id, data: params[:data].gsub(" ","+"))
  render :json => { success: true, photo_id: photo.id }
  #ajaxのsuccess時に保存したphoto_idを使いたいのでphoto_idをcallbackとして返す。
end

3.画像として保存したデータを画像として表示する

app/controllers/photo_controller.rb

def show
  @user = User.find(params[:id])
  @photo = Photo.find(params[:photo_id])
end

app/controllers/api_controller.rb

def get_photo_as_base64
  @image = Photo.find(params[:id])
  send_data @image.data.unpack('m')[0], :type => 'image/png', :disposition => "inline"
end

app/views/photo/show.html.erb

  <%= image_tag url_for(:controller => '/api', :action => 'get_photo_as_base64', :id => @photo.id) %>

これで、svg要素をbase64形式に変換してデータベースに保存して、それを読み込んで画像として表示することができました。