下載圖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

回答

相關問題