d3로 생성한 svg를 image로 추출하기

D3를 이용하여 svg에 데이터를 시각화 하고나면 그 결과를 공유해야 할 일이 생길 때가 있다. 가장 간단한 방법은 웹 사이트의 링크를 공유하는 것이지만, 때에 따라 문서에 첨부하거나 파일로 저장하여 공유해야 할 수도 있다. 보통 이러한 경우 캡처 프로그램을 사용하면 아주 간단하게 원하는 작업을 수행할 수 있으나, 이미지의 크기가 한 화면에 들어오지 않거나 저장해야 하는 이미지의 개수가 많으면 캡처 프로그램으로만으로는 한계가 있다. 따라서 이번 포스트에서는 d3로 만들어낸 svg 형태의 image를 우리에게 익숙한 png image로 출력하여 저장하는 방법을 정리하고자 한다.

이 작업을 위해서 구글링을 해보니 아래와 같은 링크를 발견할 수 있었다.

http://techslides.com/save-svg-as-an-image

  svg를 png로 export 하는 방법에 대해 아주 잘 정리 되어 있었다. 그러나 위의 링크 만으로 모든게 해결 되었다면 이 post를 작성하지 않았을 것이다. 위의 링크에 제시된 예제 코드를 그대로 실행하면 아무런 오류 없이 원하는 결과를 얻을 수 있었다. 그래서 작업 중이었던 코드에 삽입해서 image로 추출하는 것을 시도해보았으나 에러가 발생했다. 이럴 때마다 느끼는 거지만 정말 코딩 할 때 딱 한번에 잘 되는 경우가 잘 없다. 에러는 파이썬에서도 날 정말 많이 괴롭혔던 '인코딩'이 원인이었다. 아래의 코드에서 8번 째 줄이 에러를 발생 시키는 부분이다

<span style="font-size: 12pt;">d3.select("#save").on("click", function(){ var html = d3.select("svg") .attr("version", 1.1) .attr("xmlns", "http://www.w3.org/2000/svg") .node().parentNode.innerHTML; //console.log(html); var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html); var img = '<img src="'+imgsrc+'">'; d3.select("#svgdataurl").html(img); </span>

  btoa 함수는 아마 binary to ascii 의 약자로 추정되며 svg 데이터를 base64로 encoding 해주는 함수이다. 웹 브라우저에서 image는 'base64'로 인코딩된 포멧이기 때문에 data를 전송하기 위해서 binary data를 base64로 인코딩을 해줘야 한다. (출처) 그런데 btoa 함수에서 에러가 발생하는 것이다. 에러 메세지를 구글에서 검색해보니 인코딩 문제라고 한다. 예제 코드에는 없지만 내 코드에는 있는 것. 바로 한글의 존재 때문에 에러가 발생하는 것이다. 

  btoa 에 인자로 들어가는 html은 script 부분에 작성된 모든 코드를 통째로 긁어온 string 헝태인데 (), 여기에 한글이 들어가면 btoa는 utf-8 형식을 인식하지 못하기 때문에 에러가 나는 것이다. 그래서 저 부분을 해결하기 위해 stackoverflow에서 발견한 페이지에서 하라는 함수를 만들어서 전처리를 해보았다. 에러는 발생하지 않았으나 여러번 변환이 된 탓인지 뒤 쪽 코드의 그림을 그리는 부분에서 아무런 결과를 산출하지 못했다. (이 부분은 조만간 다시 한 번 시도해 보려고 한다.) 그래서 다른 방법을 찾던 중 utf-8 을 그대로 이용하는 코드를 발견했다. 이 코드는 image를 단순히 같은 화면에 복제 시킨 후 우클릭으로 그림으로 저장하는 방식으로 image를 추출하고 있었다. 그래서 위의 링크에 나온 방법과 이 코드의 앞 부분을 섞어서 드디어 원하는 결과를 얻을 수 있었다. 코드는 다음과 같다. <span style="font-size: 12pt;">d3.select("#save").on("click", function(){ var doctype = '<?xml version="1.0" standalone="no"?>' + '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">'; // serialize our SVG XML to a string. var svg = d3.select('svg') var source = (new XMLSerializer()).serializeToString(svg.node()); // create a file blob of our SVG. var blob = new Blob([ doctype + source], { type: 'image/svg+xml;charset=utf-8' }); var url = window.URL.createObjectURL(blob); // Put the svg into an image tag so that the Canvas element can read it in. var img1 = d3.select('#pngdataurl').append('img') .attr('width', width) .attr('height', height) .node(); img1.src = url; var canvas = document.querySelector("canvas") context = canvas.getContext("2d"); var image = new Image; image.src = url; image.onload = function() { context.drawImage(image, 0, 0); var canvasdata = canvas.toDataURL("image/png"); var pngimg = '<img src="'+canvasdata+'">'; d3.select("#pngdataurl").html(pngimg); var a = document.createElement("a"); a.download = "sample.png"; a.href = canvasdata; a.click(); }; // Initialize Canvas context.clearRect(0, 0, canvas.width, canvas.height) </span>

  Blob 이라는 자료형을 사용하는 방법이다. Blob에 대해서는 정확히 모르겠지만 utf-8 로 주소를 편하게 읽어올 수 있다는 것이 장점인 듯 하다. url을 utf-8 형식 그대로 읽고 나서 그 후의 방식은 가장 위에 첨부했던 링크에 나와 있는 방법과 거의 흡사하다. script에 이 code를 작성하기 전에 html의 body 부분에 두 개의 준비물이 필요한데 하나는 일반적인 <div> 이고 나머지 하나는 <canvas>이다. 코드의 진행과정은 다음과 같다. button을 클릭하면 svg를 미리 만들어둔 <div>에 image로 변환해 놓고 <canvas>에서 이 image를 읽어와서 파일의 형태로 만들어서 저장할 수 있게 한다. 이 때, <div>의 style을 display: none으로 해주어야 화면에는 아무런 변화가 없이 깔끔하게 추출만 할 수 있다.

마지막 37번 째 줄처럼 context를 clear해주지 않으면 데이터 변화에 따른 시각화의 변화가 갱신되지 않고 누적되기 때문에 꼭 저렇게 clear를 해주어야 한다.

인코딩 문제를 해결하고 그림을 추출하는 것까지는 성공했으나.. style sheet 정보까지 image에 포함시켜 추출시키는 것은 여전히 모르겠다. 즉, script 안에서 여러 가지 method로 선언해준 것들은 image에 포함이 되나 style 부분에서 지정해준 것은 전혀 반영이 되지 않는다. 이 문제까지 해결하면 svg의 image 파일 추출은 거의 온전하게 할 수 있을 것 같은데 쉽지가 않다.