下载图表JOINTJS图像| SVG ==>使用Javascript进行PNG

Question

I currently have a problem. When wishes to convert a chart created with JOINTJS image, the elements do not display correctly ...

The diagram:

http://www.hostingpics.net/viewer.php?id=698706graph.png

Conversion :

http://www.hostingpics.net/viewer.php?id=867158graph2.png

Here is my code:

  var canvas = document.getElementById('canvas');
  var svg = document.querySelector('svg');
  var ctx = canvas.getContext('2d');
  var data = (new XMLSerializer()).serializeToString(svg);
  var DOMURL = window.URL || window.webkitURL || window;

  var img = new Image();
  var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
  var url = DOMURL.createObjectURL(svgBlob);

  img.onload = function () {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);

    var imgURI = canvas
        .toDataURL('image/png')
        .replace('image/png', 'image/octet-stream');

    triggerDownload(imgURI);
  };

  img.src = url;

After much research, different codes, I still can not find the solution. Thanks in advance !

Answer 1

Let me try to answer.

Use the below code to get SVG encoded data and store it in var (here 'encodedData')

var encodedData; 
var s = new XMLSerializer().serializeToString(document.getElementById("ur_svg_id"));
encodedData = window.btoa(s);

Simply draw the SVG Image to a canvas

var canvas = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.drawSvg('data:image/svg+xml;base64,' + encodedData, 0, 0, 740, 1100);

Export the canvas to PNG image using filesaver.js

canvas.toBlob(function(blob) {
    saveAs(blob, "MyCanvas.png");
});

Make it simple !