0

I'm trying to convert a dendrogram like this one into a picture (png/jpg). Look what I've tried to do:

function get_dendrogram(){
    var svg = document.querySelector('svg');
    var data = (new XMLSerializer()).serializeToString(svg);
    var blob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
    saveAs(blob, "my_image.png"); 
}

To save the generated blob, I'm using FileSaver.js.

I don't know what I can be missing... When I try to open the file, It says that is corrupted.

I also tried converting the svg to canvas using html2canvas then saving with FileSaver or canvas2image. In these ways I got the image, but It is deformed.

João Paulo
  • 6,300
  • 4
  • 51
  • 80
  • 1
    You are trying to create a blob which is a SVG but you are saving it as PNG file. FileSaver don't convert the data to any other format... – Endless Jun 12 '16 at 18:28
  • ow, got it! thanks – João Paulo Jun 12 '16 at 18:49
  • 1
    Instead of using html2canvas, try [converting the svg to canvas](https://github.com/gabelerner/canvg). Then save the canvas `canvas.toBlob(func...)` – Endless Jun 12 '16 at 19:03
  • 1
    Possible duplicate of [Convert SVG to image (JPEG, PNG, etc.) in the browser](http://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser) – Endless Jun 12 '16 at 19:06

0 Answers0