問題タブ [canvg]

私は d3.js 折りたたみ可能なツリーを構築しており、この ( http://bl.ocks.org/mbostock/4339083 ) の例を私の仕事に使用しました。これはうまく機能しますが、このツリーを SVG/PDF/PNG としてダウンロード/エクスポートするオプションも提供します。この問題を処理するために長い間検索しましたが、常に同じ結果です。結果の SVG/PNG に問題があります。正確には、ツリーのノード間のリンクに障害があります。

私はこれらのアプローチを試しました：

ht_tp://jsfiddle.net/plaliberte/HAXyd/

ht_tp://d3export.cancan.cshl.edu/

理解を深めるために、この写真を見てください！

http://de.tinypic.com/r/30auvec/5

ありがとうございました！

canvgを使用して、生成された（d3jsで）SVGオブジェクトからPNG画像を作成しようとしています。すべてのパス (例にはありません) は完全にレンダリングされますが、円パスに配置された textPath は表示されません (s. jsFiddle の例)。

どこが悪いのでしょうか？canvgによって適切にレンダリングされたtextPathはどうすればよいでしょうか?

ここに私の例がありますhttp://jsfiddle.net/T3AR4/

テキストを描画するためにSVGでその部分を使用しています：

Java で canvg https://code.google.com/p/canvg/のネイティブ メソッドを使用して、SVG 文字列をキャンバスから png 画像に変換します。SVG 文字列の画像をレンダリングする時間が必要なため、renderCallback が必要です。そうしないと、間違った構造が得られます。コードは次のとおりです。

したがって、正しい png 画像を含むタブがブラウザーで開かれます。しかし、この String img = canvas.toDataURL("image/png"); を取得する可能性はありますか? コールバックの外で作業していますか? 私が想像できる唯一のことは、img var をパラメーターとして取得する function() 内で Java メソッドを呼び出すことです。より良い解決策があることを願っています。

html/css (post js アクション) をそのままプルして、png などの画像に変換するワンストップ ショップ ライブラリはありますか? 私の複雑な点は、ページのjsがロード後にsvgまたはあらゆる種類のスタイルをレンダリングできることです-わかりません。

サーバー側に方法があることは知っていますが、これをクライアントに実装したいと思っています。

また、svg を変換する canvg があることも知っていますが、自分のページに何が含まれるかは事前にわかりません。キャンバス、svg、何でもあります。そのため、かなり堅牢なツールが必要です。

何か案は？html2canvasはうまくいきませんでした。cssでのsvgとjsの操作を省略しました。

ありがとうございました。

元の SVG チャート

レンダリングされたキャンバス チャート

これは、キャンバスに変換するために使用しているコードです

この問題の解決にご協力ください。

Raphael を使用して、SVG でいくつかの操作を行っています。SVG を画像として保存するために、Canvg を使用して SVG をキャンバスにレンダリングします。しかし、キャンバスにレンダリングされた SVG 内の画像の変換は正しくありません。Canvg は html5 のネイティブの transform() メソッドを使用して、Canvg の 571 行目の以下のコードを使用して変換を適用します。

ただし、これにより、画像の原点を中心に回転やスケーリングなどの変換が行われます。しかし、Raphael では、変換は画像の中心に適用されます。

すべてが画像の中心付近で起こるように変換を適用することは可能ですか?

ファイルを helloWorld.png としてダウンロードしようとしていますが、常に download.png として保存されます。

不足しているものを特定するのを手伝ってもらえますか?

http://jsfiddle.net/shanthisivanesan/a2FLx/22/

Raphael を使用して、キャプチャして PNG に変換し、開いているウィンドウに表示する SVG を作成しました。this one のような他のスタックオーバーフローの回答を見てきました。その質問に対するolliegの回答を実装しました。これが私がやっていることの例です:

これにより、黄色の長方形が描画され、png として出力されます。コンソールは、キャンバス変数で SVG が正しくキャプチャされていることを確認します。ただし、toDataURL 行はエラーをスローします:「TypeError: 'null' はオブジェクトではありません ('canvas.toDataURL' を評価しています)」私のhtml、キャンバスを取得するdivだけです。ただし、キャンバスが正しくキャプチャされていることを考えると、2 行目でそのエラーがスローされる理由がわかりません。