14

D3 Javascript ライブラリで生成されたグラフがあり、これらをファイル PNG または SVG に保存する必要があります。

仕事をするライブラリはありますか？

このhttps://github.com/sampumon/SVG.toDataURLを見つけましたが、html5 で動作していません。firefox コンソールで次のエラーが発生しました。

NS_ERROR_NOT_AVAILABLE: コンポーネントが利用できません [Interrompi per questo errore]

ctx.drawImage(img, 0, 0);

4

3 に答える 3

8

canvas 要素を使用して svg を png にエクスポートする方法を示すdeveloper.mozilla.orgの例。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
           '<foreignObject width="100%" height="100%">' +
           '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
             '<em>I</em> like ' + 
             '<span style="color:white; text-shadow:0 0 2px blue;">' +
             'cheese</span>' +
           '</div>' +
           '</foreignObject>' +
           '</svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
  var png_img = canvas.toDataURL("image/png");
}

img.src = url;
于 2016-12-09T13:52:47.913 に答える
1

サーバーサイドスクリプト方式

svg 要素を png に保存する簡単な方法を次に示します (ただし、サーバー側のスクリプトを使用するため、予想とは異なる場合があります):このページを確認してください。

著者によって文書化されているように、クライアントは (XMLSerializer.serializeToString を使用して) svg 要素を抽出し、それをサーバーに送信します。サーバーはそれを png に変換し、クライアントに送り返します。サーバーは、便利なプログラム (この場合は rsvg-convert) を使用できます。

Canvg ライブラリ

このライブラリを使用して、クライアント側でこれを行うことができます(チェックしてください!) :

canvg は SVG パーサーおよびレンダラーです。SVG ファイルまたは SVG ファイルのテキストへの URL を受け取り、それを JavaScript で解析し、その結果を Canvas 要素にレンダリングします。

次のように使用します。

//load a svg snippet in the canvas with id = 'drawingArea'
canvg(document.getElementById('drawingArea'), '<svg>... </svg>')

次に、toDataURL メソッドを使用できます。 document.getElementById('drawingArea').toDataURL('image/png');

于 2014-03-09T14:50:49.507 に答える
1

この拡張機能<svg>は、ページ内のすべてのタグで機能します: https://chrome.google.com/webstore/detail/svg-export/naeaaedieihlkmdajjefioajbbdbdjgp?hl=en-GB

于 2019-12-09T15:25:15.907 に答える