使用Javascript下载一个JOINTJS图表 图像|SVG==>PNG

Question

我目前有一个问题。想要将用JOINTJS创建的图表转换为图像时，元素显示不正确...

图表：

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

转换：

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

这是我的代码：

  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;

经过长时间的研究和不同的代码尝试，我仍然无法找到解决方案。谢谢！

- Lucatorze

---

这是因为在img元素中无法加载svg的外部资源。您需要将它们转换为dataURI并附加到您的svg元素中。存在重复内容，并且可以参考此文档主题：http://stackoverflow.com/documentation/html5-canvas/3689/media-types-and-the-canvas/14410/drawing-an-svg-image#t=201607270952095100516。 - Kaiido

这里有一个重复的问题：https://dev59.com/LZHea4cB1Zd3GeqPsKcB#34043188，我不投票关闭，因为你可能还有更多的问题。 - Kaiido

非常感谢！我可以用这个来调整我的代码！ - Lucatorze

由于您正在多次使用相同的图像，请确保使用<use>元素，并仅定义一次您的<image>，否则您的文件将显著增大（即使它留在内存中，也会对性能较低的设备产生不良影响）。 - Kaiido

Answer 1

让我来回答这个问题。

使用以下代码获取SVG编码数据并将其存储在变量中（此处为“encodedData”）

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

只需将SVG图像绘制到画布上即可

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

使用filesaver.js将画布导出为PNG图像。

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

让它简单！

- Gokul Maha