下载图表 JOINTJS Image | SVG ==> 带有 Javascript 的 PNG答案

【问题标题】：Download a diagram JOINTJS Image | SVG ==> PNG with Javascript下载图表 JOINTJS Image | SVG ==> 带有 Javascript 的 PNG
【发布时间】：2016-12-01 03:10:52
【问题描述】：

我目前有一个问题。当希望转换使用 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;

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

【问题讨论】：

这是因为您无法从 img 元素中的 svg 加载外部资源。您必须将这些转换为 dataURI 并将其附加到您的 svg 元素。有骗子，这个doc topic
这是骗子之一：stackoverflow.com/questions/34042910/… 不投票结束，因为您可能有更多问题。
非常感谢！我可以用这个来调整我的代码！
由于您多次使用相同的图像，请务必使用<use> 元素并且只定义一次<image>，否则您的文件会显着增长（即使它保持不变）在内存中，它会对低性能设备产生不良影响）

标签： javascript svg png jointjs

【解决方案1】：

让我试着回答一下。

使用以下代码获取 SVG 编码数据并将其存储在 var（此处为 '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");
});

让它变得简单！

【讨论】：