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

    좋은 웹페이지 즐겨찾기