図のダウンロードJOINTJS Image | SVG ==> JNG形式のPNG

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 canvas = document.getElementById('canvas'); 
var ctx = c.getContext('2d'); 
ctx.drawSvg('data:image/svg+xml;base64,' + encodedData, 0, 0, 740, 1100); 

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

SVG符号化データを取得し、VAR（ここでは「encodedData」）に保管するためにキャンバスを以下のコードを使用しますPNG画像を使用するfilesaver.js

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

簡単にしてください！