問題タブ [canvg]

Raphael を使用してオブジェクトを描画し、canvg を使用して HTML キャンバス要素に転送し、toDataURL を使用して PNG として保存できるようにしています。しかし、canvg を使用すると、結果の画像がぼやけます。たとえば、以下のコードはこれを生成します (上が raphael、下が canvg):

ぼやけは、toDataURL によって作成された png でも明らかです。ここで何が起こっているのか分かりますか？サイズ直しとは関係ないと思います。ignoreDimensions: True などを設定してみました。

別のデータポイント。raphael を使用してテキストを出力してから canvg を使用すると、ぼやけるだけでなく、間違ったフォントになります!

そして、ここに test.rect(0.5,0.5,50,50) が提案されています。まだぼやけています:

drawSvg() 関数を使用して、SVG をキャンバスに変換/配置しようとしています。コマンドは次のとおりctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);です。これは、具体的に svg をパラメーターとして入れるとうまく機能します。たとえばctx.drawSvg('<svg><rect x="0" y="0" width="100" height="100" fill="red" /></svg>', 0 , 0 , 500, 500);、次のようにします。赤い四角形が含まれるキャンバスになりますが、これは正確です。ただし、ドキュメントから Svg タグを取得し、それをパラメーターとして使用できるようにする必要があります。これを行うためにいくつかの異なる方法を試しましたが、どれもうまくいきません。どうすればいいですか？これは、私がやろうとしていることを含む jsFiddle ページです。ありがとう！ http://jsfiddle.net/qDmhV/722/

d3 で生成された線散布図グラフを canvg を介してキャンバスに変換しようとすると、問題が発生します。

私のグラフはもともと次のようになっています。

imgurリンク

svg.html().trim() 経由で svg を印刷すると、次の HTML が印刷されます。

ご覧のとおり、インライン スタイルをできる限り試しました。しかし、canvgを使ってキャンバスに変換すると、このようになります。

キャンバス出力

何らかの理由で、x 軸のみが表示され、スタイルが設定されています。次のコードで 2 番目の画像を生成しました。

コンソールに次のようなエラーが表示されます。

調査の結果、多くの人が私と同様の問題を抱えていますが、多くの支援は提供されていません. 私が見つけた唯一の情報は、canvg がいくつかの SVG 要素を翻訳するのに苦労し、単にあきらめたということです。私の最終目標は、d3 で生成された SVG をクライアントのコンピューターに保存することです。

また、それが役立つ場合、私は Chrome についてのみ心配しています。お時間をいただきありがとうございました...

SVGをCANVASに変換し、画像として保存したいと考えています。私は自分のページでJavaScriptによってすでに生成されたsvgを持っています。私はこのコードを使用します：

どちらの方法も機能しません。なんで？

I'm having an issue with canvg. I can't get it to render a right-floated element.

The trick I'm using to float elements on the right side of this d3 plot (svg elements do not actually support css float) is to create a nested svg with x=100%, then use negative x values on sub-elements to shift them back into the viewable area.

As you can see in this fiddle, canvg is not rendering the contents of badContainer.

http://jsfiddle.net/ujdaLfh7/3/

Thanks.

Edit:

As a workaround to this issue I ended up positioning the legend box using a function that sets the x position of the child svg, along with an angular.js directive that watches for window resize.

Still though, if anyone knows how to get canvg to draw stuff that's positioned outside the svg area, I will accept your answer.

私たちのウェブサイトは、 「Anonymous」に設定されたcrossOrigin属性を使用して、Amazon S3 から画像を読み込むクロムで問題が発生しています。

私たちの S3 サーバーは次のように設定されています。

`

`

リモート イメージ (Amazon S3 サーバー上) を含む SVG からキャンバスを作成するために canvg.js を使用していますが、クロム ブラウザから「要求されたリソースに'Access-Control-Allow-Origin' ヘッダーが存在しません」というメッセージが返されます。このコードを実行した後のエラー:

firefox と IE では、これは問題になりません。

svg画像をpngとしてダウンロードし、canvgを使用してキャンバスオブジェクトに変換しようとしています.しかし、ダウンロード後、画像が表示されず、奇妙な黒い画像が表示され、正しく表示されません. フィドルを修正できますか？

私はcanvgを使用してsvg要素をキャンバスにレンダリングし、jspdfを使用してダウンロードしています。以下は私のコードです：

しかし、pdfの画像はぼやけて見え、元の画像ほど鮮明ではありません（背景の違いは無視してください）：

おそらくcanvgがsvgをキャンバスにレンダリングするステップが原因だと思います。しかし、私はそれを修正する方法がわからない、誰かが助けることができますか？

これは私の Google Chart で、PHP からデータを取得し、addRows の for サイクルを使用してグラフに入力します。jsPDF で作成したドキュメントをエクスポートできるボタン (pdfBtn) を追加しました。すべてがすべてのブラウザーで機能しますが、Firefox では、エクスポートされたドキュメントのグラフではなく黒い画像が表示されます。形式を PNG に変更しようとしましたが、黒ではなく白の画像が表示されます。JPEG と PNG の背景色のプロパティに関連していることはわかっていますが、CSS を設定しようとしましたが、何も機能しません。この問題を解決する方法が本当にわかりません。ただし、pdfBtn は Internet Explorer では動作しませんが、まずは Firefox で問題を解決していただければ幸いです。