javascript - 下载图表 JOINTJS Image | SVG ==> 带有 Javascript 的 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;

经过多方研究，不同的代码，我仍然找不到解决方案。提前致谢!

Answer 1

让我试着回答。

使用以下代码获取 SVG 编码数据并将其存储在 var 中(此处为“encodedData”)

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

简单地将 SVG 图像绘制到 Canvas 上

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

使用 filesaver.js 将 Canvas 导出为 PNG 图像

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

让它变得简单!