我目前有一个问题。想要将用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;
经过长时间的研究和不同的代码尝试,我仍然无法找到解决方案。谢谢!
<use>
元素,并仅定义一次您的<image>
,否则您的文件将显著增大(即使它留在内存中,也会对性能较低的设备产生不良影响)。 - Kaiido