2

I have implemented a small svg and I was able to save it. But my case is I need to save an svg (collapsable tree ) whose width is around 14,000px, when I save svg with the same code which I have used earlier, it shows only small part of svg. Is there any size limitations that an svg can be converted as png? Please help me why my code is not working with bigger svg..

Here is my code:

$('body').on('click', '#saveOrderTreeview', function () {
  var html3 = d3.select('.nodeClass')
        .style({"background-color": "White"})
        .attr("version", 1.1)
        .attr("fill","none")
        .attr("stroke-width",1.5)
        .attr("stroke","#ccc")
        .style("font","12px sans-serif") 
        .attr("xmlns", "http://www.w3.org/2000/svg")
        .node().parentNode.innerHTML;
  var name = "orderBook.png";
  var height = ($(".nodeClass").attr("height"));
  var cnvs1 = d3.select("body")
        .append("div")       
        .attr("id", "saveoTreeview")
        .html('<canvas id="mycanvas1" style="display:none" height=' + height + ' width=' + mainChartWidth + '></canvas>');
  var imgsrc = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(html3)));
  var canvas = document.getElementById("mycanvas1");
  var context = canvas.getContext("2d"); 
  console.log(cnvs1)
  var image = new Image;
  image.src = imgsrc;
  image.onload = function () {
    context.drawImage(image, 0, 0);
    var canvasdata = canvas.toDataURL("image/png");
    var a = document.createElement("a");
    a.download = name;
    a.href = canvasdata;
    document.body.appendChild(a);
    a.click();
  };
}); 
αƞjiβ
  • 3,056
  • 14
  • 58
  • 95
  • 1
    Maybe this is helpfull: http://stackoverflow.com/questions/4109447/file-format-limits-in-pixel-size-for-png-images – dummy Sep 22 '15 at 13:28

0 Answers0