web-dev-qa-db-ja.com

d3.jsグラフをpdf / jpegに変換/保存する方法

既存のD3-SVGグラフをファイルに保存または変換するために、クライアント側/ javascript関数で作業しています。私はよく検索して、主にcanvas.toDataURL()を使用していくつかの推奨事項を見つけました。

ページに_<canvas>_がなく、代わりに：d3.select("body").append("svg")....を使用しています。SVGを_<canvas>_に追加しようとしましたが、何も起こりません。

この例外を解決するのを手伝ってください：

_Uncaught TypeError: Object #<SVGSVGElement> has no method 'toDataURL' 
_

ありがとうございました

svgd3.jspdf-generation
30
Moein

この質問に関するこのコメントで@Premasagarが指摘したように、 ブラウザでSVGを画像（JPEG、PNGなど）に変換します

ブラウザがSVGとキャンバスの両方をサポートしている場合、この手法を使用できます https://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/index.html

function importSVG(sourceSVG, targetCanvas) {
    // https://developer.mozilla.org/en/XMLSerializer
    svg_xml = (new XMLSerializer()).serializeToString(sourceSVG);
    var ctx = targetCanvas.getContext('2d');

    // this is just a JavaScript (HTML) image
    var img = new Image();
    // http://en.wikipedia.org/wiki/SVG#Native_support
    // https://developer.mozilla.org/en/DOM/window.btoa
    img.src = "data:image/svg+xml;base64," + btoa(svg_xml);

    img.onload = function() {
        // after this, Canvas’ Origin-clean is DIRTY
        ctx.drawImage(img, 0, 0);
    }
}
4
Pavel Nikolov

キャンバス内でsvgを表示するには、まず http://code.google.com/p/canvg/ などのパーサー/レンダラーユーティリティを使用して変換する必要があります

（コードの適応： ブラウザでSVGを画像（JPEG、PNGなど）に変換 、テストなし）

// the canvg call that takes the svg xml and converts it to a canvas
canvg('canvas', $("#my-svg").html());

// the canvas calls to output a png
var canvas = document.getElementById("canvas");
var img = canvas.toDataURL("image/png");
20
widged

この概念を小さなJavaScriptライブラリに変えたということを頭に入れてください。 https://github.com/krunkosaurus/simg

任意のSVGを画像に変換して、スワップアウトまたはダウンロードをトリガーします。ここからのアイデア： http://techslides.com/save-svg-as-an-image/

6
Mauvis Ledford

上記のMauvis Ledfordによって作成および提案されたSimgライブラリは、Dimpleで作成された私のsvgチャートをダウンロードできるようにするのに非常に役立ちました。

ただし、コードを機能させるには、コードの1つの側面を変更する必要がありました。 toString（）プロトタイプ内、forEachループ内（行37）で、「svg.setAttribute（..）」を「svg [0] .setAttribute」に変更すると、「setAttribute（..）は関数」エラー。同様に、returnステートメントのすぐ下で同じことを行う必要があり、svgの後に「[0]」を追加します（39行目）。

また、ダウンロードした画像をより適切なサイズにするために、toCanvas（）プロトタイプの「canvas.width」と「canvas.height」（48行目と49行目）の割り当てを手動で編集する必要がありました（以前は単にグラフの左上隅にある静的な300x150の正方形）。

3
Psilocybic