Witam.

Mam wykres narysowany w nvd3, chcę go wyeksportować do PNG/JPEG. Niestety mam taki problem że po kliknięciu przycisku, obrazek owszem pobiera się, jednak tylko jego mały fragment. Na dodatek zamiast czcionki są jakieś kropki, kreski. Spotkał się ktoś z czymś takim?


  1. /
  2. //.....
  3. $('#export_to_png').click( function() {
  4. var html = d3.select("#chart svg")
  5. .attr("version", 1.1)
  6. .attr("xmlns", "http://www.w3.org/2000/svg")
  7. .node().parentNode.innerHTML;
  8.  
  9. var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
  10. var img = '<img src="'+imgsrc+'">';
  11. $('#mycanvas').append(img);
  12. var canvas = document.querySelector("canvas"),
  13. context = canvas.getContext("2d");
  14.  
  15. var image = new Image;
  16. image.src = imgsrc;
  17.  
  18. image.onload = function() {
  19. context.drawImage(image, 0, 0);
  20.  
  21. var canvasdata = canvas.toDataURL("image/png");
  22.  
  23. var pngimg = '<img src="'+canvasdata+'">';
  24.  
  25. var a = document.createElement("a");
  26. a.download = "chart.png";
  27. a.href = canvasdata;
  28. //a.click();
  29. };
  30. });
  31.  
  32. });
  33.  
  34.  
  35. </script>
  36.  
  37. <button class="ui-widget ui-corner-all ui-state-default" id="export_to_png" style="cursor: pointer" type="button">Export to PNG</button>
  38.  
  39. <canvas id="mycanvas" style="height: 900px; width: 100%"></canvas>
  40. <div id="chart" style="height: 900px; width: 100%">
  41. <svg style="height: 100%">
  42. </svg>
  43. </div>
  44.