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'）

中

SELECT  t.AccountID, upvt.Title, upvt.TheData
FROM    dbo.StagingTable AS t
        CROSS APPLY
        (VALUES
            ('FreeText1', FreeText1),
            ('FreeText2', FreeText2),
            ('FreeText3', FreeText3),
            ('FreeText4', FreeText4)
        ) AS upvt (Title, TheData);

只需将SVG图像绘制到画布

即可

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

使用filesaver.js

将画布导出为PNG图像

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

简单一点！

下载图表JOINTJS图像| SVG ==＆gt; PNG与Javascript

1 个答案: