下载图JOINTJS图片| SVG ==>使用Javascript的PNG

我目前遇到问题。当希望与JOINTJS图像创建的图表转换，该元件不正确显示...下载图JOINTJS图片| SVG ==>使用Javascript的PNG

的图：

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;

经过很多研究，不同的代码，我仍然找不到解决方案。在此先感谢！

来源

2016-07-27 Lucatorze

这是因为您无法从img元素中的svg加载外部资源。您必须将这些转换为dataURI并将其附加到您的svg元素。有一些模仿，这[doc topic]（http://stackoverflow.com/documentation/html5-canvas/3689/media-types-and-the-canvas/14410/drawing-an-svg-image#t=201607270952095100516 ） – Kaiido

这是一个愚蠢的：http://stackoverflow.com/questions/34042910/convert-svg-to-png-with-applied-images-as-background-to-svg-elements/34043188#34043188不投票因为你可能有更多的问题。 – Kaiido

非常感谢！我可以用这个修改我的代码！ – Lucatorze

让我试着回答。

使用下面的代码来获得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);

出口画布使用PNG图像filesaver.js

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

让它简单！

来源

2016-07-28 12:28:57

下载图JOINTJS图片| SVG ==>使用Javascript的PNG

回答

相关问题