問題タブ [canvg]

親愛なる友よ、こんにちは。リーフレットマップからpngファイルを作成したい。私は html2canvas ライブラリを使用しており、リーフレット マップ タイルやその他の要素は png に変換されますが、svg-elements(offsets) には変換されません。すべての svg 要素を canvas(

しかし、これは私にとって悪い方法です.なぜなら、extendを変更するとすべてのsvg要素がちらつくからです...

だから... CANVGを使用してリーフレットのsvgポリゴンをキャンバスに変換するにはどうすればよいですか? これは、svg要素のオフセットを持つpngを作成するための私のコントロールです

HTML:

次のコードがあり、それを使用して、PDF ファイルで使用する D3 画像を取得します。これは、Microsoft Edge で試すまでうまく機能していました。誰でもこれに出くわしたり、回避する方法について提案したりできます。基本的に、画像は黒い中心で返されます。

IEを使用したトップ画像。Edgeを使用した下の画像。

編集: テストする jsfiddle を作成しました。Edge をブラウザとして使用すると、問題が発生する可能性があります。

http://jsfiddle.net/jjhii/46bv10db/1/

外部画像ソースを参照する多くの画像タグを持つ SVG があります (Amazon s3 バケットから言う)。このようにpngに変換しようとしています

このエラーが発生していますUncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be export.

s3 バケットの設定を変更しました (ここで述べたように)。canvg 関数の後にこのコードを追加しました

すべての画像タグを反復して、crossOrigin 属性を設定しようとしても

それでも同じエラーが発生します。

svg を png に変換しようとしていますが、変換された画像が svg と同じではないことがわかりました。svgとpngの両方の一貫性をどのように保証できますか?

svg を png に変換するコード

すべてがファイルですが、ダウンロードした画像を見ると、高さ、幅が異なり、ラベルとフォントが表示されません。

svg を生成するコード:

実際の SVG:

変換された PNG:

これがサンプルjsFiddleです。

スケールを 5000 から 6000 に変更すると、svg は大きくなりますが、png は大きくなりません。fiddle 出力 svg を右クリックして、png としてエクスポートできます。

Google チャートを JPEG/PNG 画像としてエクスポートする必要があるという要件に取り組んでいます。以下のコードは、Internet Explorer 以外の他のブラウザーでは正常に動作します。

上記のコードを IE 10 で実行すると、空白の PNG 画像が表示され、この行に問題があることがわかりました

canvas.toDataURL("画像/png");

これを調べて解決策を提供してください

一部の SVG を画像にレンダリングするためにcanvgを使用しています。現在、SVG からキャンバスへの部分は正常に機能しています。ただし、ポインタがキャンバスに入ったときに生成されたキャンバスが変更される理由を特定できません。生成されたキャンバスを本当にコピーする必要がありますか、それとも何か不足していますか?

jsfiddle

MacOS X El Capitan の Firefox DE 47 および Chrome 49 で検証済みです (また、私の友人は、これが Firefox と Chrome の両方の Windows で発生していることを検証しました)。

http://jsfiddle.net/jjhii/46bv10db/1/

別のビューで、問題を簡単に確認できます。 http://jsfiddle.net/46bv10db/5/

上記の例では、右側のラベルが PNG ファイルのチャートの後ろにある場所を確認できます。元のグラフには、これらのラベルが右側にあります。基本的にコンセプトには2つの問題があります。1 つ目は、カートの幅が広すぎることです (PNG ファイル)。2 つ目は、ラベルが遅れていることです。チャートシックスを修正したいのですが、少なくともラベルを前に置くだけで十分です。

任意の提案、ありがとう。

canvg プラグインを使用して 1 つのキャンバスを作成しました。

次に、[canvg で作成] ctx.drawimage() を使用してキャンバスの下に別の背景画像を配置します。

私は試した 。

提案してください。