10

現在、canvg() と Canvas2Image を使用して SVG をキャンバスにコピーし、キャンバスを PNG に変換しています。画像形式を維持し、PDF を使用したくない。

CSS の整合性を維持するにはどうすればよいですか? チャートはNVD3.jsで作成しています。

downloadPhoto: function() {
  var chartArea = document.getElementsByTagName('svg')[0].parentNode;
  var svg = chartArea.innerHTML;
  var canvas = document.createElement('canvas');
  canvas.setAttribute('width', chartArea.offsetWidth);
  canvas.setAttribute('height', chartArea.offsetHeight);
  canvas.setAttribute('display', 'none');

  canvas.setAttribute(
    'style',
    'position: absolute; ' +
    'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
    'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
  document.body.appendChild(canvas);
  canvg(canvas, svg);
  Canvas2Image.saveAsPNG(canvas);
  canvas.parentNode.removeChild(canvas);
}

元の SVG

PNG に変換された SVG

4

3 に答える 3

5

スタイルシートで定義された svg 要素のスタイル定義は、生成されたキャンバスには適用されません。これは、canvg を呼び出す前にスタイル定義を svg 要素に追加することで修正できます。

この記事に触発されて、私はこれを作成しました：

function generateStyleDefs(svgDomElement) {
  var styleDefs = "";
  var sheets = document.styleSheets;
  for (var i = 0; i < sheets.length; i++) {
    var rules = sheets[i].cssRules;
    for (var j = 0; j < rules.length; j++) {
      var rule = rules[j];
      if (rule.style) {
        var selectorText = rule.selectorText;
        var elems = svgDomElement.querySelectorAll(selectorText);

        if (elems.length) {
          styleDefs += selectorText + " { " + rule.style.cssText + " }\n";
        }
      }
    }
  }

  var s = document.createElement('style');
  s.setAttribute('type', 'text/css');
  s.innerHTML = "<![CDATA[\n" + styleDefs + "\n]]>";
  //somehow cdata section doesn't always work; you could use this instead:
  //s.innerHTML = styleDefs;

  var defs = document.createElement('defs');
  defs.appendChild(s);
  svgDomElement.insertBefore(defs, svgDomElement.firstChild);
}

// generate style definitions on the svg element(s)
generateStyleDefs(document.getElementById('svgElementId'));
于 2015-08-11T18:36:25.597 に答える
3

ここで重要なことは、すべてのスタイル ルールが外部スタイル ファイルではなく、SVG の一部である必要があるということです。そのため、NVD3 のすべての CSS を調べて、それらの属性をすべてコードに設定する必要があります。外部スタイルシートを介して設定されたものはすべて無視されます。

于 2013-12-05T09:09:09.667 に答える
2

@Lars Kotthoffの答えをより具体的にするためだけに。「svg から直接 png をエクスポートする方法の例」には、実際の例があります。コード スニペット/要点は、最初にすべての css を svg インラインに適用してから、キャンバスに画像を描画し、データを png としてエクスポートしようとします。(内部的にはsvg-crowbarコードを採用)。プロジェクトにこの手法を適用すると、スムーズに動作します.nvd3を使用してレンダリングされたsvg画像をダウンロードできるダウンロードボタンです。

于 2016-12-31T05:16:55.547 に答える