D3.js 등에서 출력되는 svg를 이미지로 표시하는 방법

D3.js( htp // d3js. rg/ ) 등으로 출력되는 svg 요소를 이미지로 사용하고 싶어졌으므로 d3.js에서 svg로 표시하고 javascript에서 svg 데이터를 base64 형식으로 저장하고 base64 형식의 이미지 데이터 화면에 표시하는 방법을 요약했습니다.

【순서】

D3.js를 사용하여 데이터를 graphics에 표시합니다

출력 된 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 형식으로 변환하여 데이터베이스에 저장하고 읽고 이미지로 표시 할 수있었습니다.