問題タブ [canvg]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
4931 参照

javascript - canvgを使用してsvgをキャンバスに描画します

キャンバスにsvgファイルを設定するためにcanvgを使用します。svg urlを設定すると、すべて問題ありません。

しかし、私が書き込もうとすると(それは機能しません):

ここで、変数svgはmanual.svgコンテンツを取得します。

0 投票する
1 に答える
400 参照

javascript - SVGをキャンバスにコピーした後の不思議な成長

ページにsvgがあり、pngにエクスポートする必要があるため、ここでのアドバイスに従って、 canvgを使用しています。

コピーは最初はうまく機能しているように見えますが、その後、キャンバスの高さが不思議に増加し始めます。

私は明らかに間違ったことをしていますか?運が悪かったので、キャンバスにさまざまなサイズを設定してみました。IEとChromeで失敗します。

これが私のエクスポート機能です:

これが問題を示すjsfiddleです:http://jsfiddle.net/LkqTU/4772/

スクロールすると問題が悪化するようです!

0 投票する
1 に答える
464 参照

javascript - キャンバスにレンダリングされたsvgの可視性を切り替えます

canvgを使用して、多数のsvgをキャンバスにレンダリングしています。チェックボックスに基づいてこれらのsvgを非表示/表示したい-チェックボックスを少し下げて、svgを表示させます。しかし、私の質問は、どうすればsvgを非表示にすることができますか?

これが私がsvgsをレンダリングする方法です:

ここで、レンダリングした(選択された)svgをいくつかの条件で非表示にします。私は何も機能させることができませんでした、あなたたちは何かアイデアがありますか?

ありがとう!

0 投票する
1 に答える
4262 参照

ruby-on-rails - Rails経由でbase64エンコードされた画像/オクテットストリームを画像ファイルとして保存

Google グラフを画像として保存するためにcanvgライブラリを使用しています。このプロセスの詳細については、このページを参照してください。

OK、JS フレームワークは画像のエンコードされたデータを提供し、ダウンロードをトリガーするフォームと非表示フィールドを使用してそのデータを POST します。

HTMLコード

JS コード

最後に、POST リクエストに応答してダウンロードをトリガーするコントローラー コードです。

ご覧のとおり、いくつかのヘッダー オプションを試してみました。問題は、ダウンロードされたイメージが破損していることです。HexEditor で開いたところ、PNG ヘッダーがないことがわかりますが、これに関する私の知識は存在しません。お役に立てれば幸いです。

0 投票する
1 に答える
315 参照

canvas - canvg 経由でインポートされた svg ファイルで定義されたパスにアクセスできますか?

canvg ( http://code.google.com/p/canvg/ ) を使用して <canvas> オブジェクトにインポートした svg ファイルに画像があります。

ユーザーが svg ファイルで定義されたパスのいずれかをクリックするたびに、アクションを実行する必要があります。それは可能ですか?

Canvas は必要ありません。これがなくてもできる場合はお知らせください (次のようなものはありますか?)

0 投票する
1 に答える
2707 参照

javascript - HTML キャンバス画像

AMcharts を使用してグラフを描画しています。グラフをpdfで表示する必要があります。そこで、グラフをpng画像に変換してpdfで表示しました。このプロセスは、IE9 を除く最新のブラウザーで正常に機能します。

私の問題はIE9のみです。

div コンテナーに 2 つの svg タグがあります。2 番目の svg タグは、予想どおり完全に解析されています。しかし、最初の svg タグは空白の画像として表示されています。

HTMLキャンバスにcanvg.jsを使用しています。

これを解決するのを手伝ってください。これは私の最初の投稿です。前もって感謝します。

0 投票する
1 に答える
2166 参照

canvas - Canvgを使用したSVGからキャンバスへ - 行が塗りつぶされ、背景の行が削除されましたか?

Canvgを使用して SVG を Canvas に変換しようとしています。箱から出してすぐはかなり良いです。

元の SVG グラフ SVG グラフ

キャンバス レンダー キャンバス レンダー

私は理解するのに苦労しています:

  1. 行が「埋められている」のはなぜですか? 最初の点から最後の点まで線が引かれているように見えますが、canvg ライブラリで見つけることができないようです。
  2. 背景の線要素がドロップされています: これは例です<line class="tick" y2="-220" x2="0"></line>

誰にもアイデアはありますか?詳細情報を提供させていただきます。ありがとう!

0 投票する
3 に答える
7652 参照

highcharts - highchartsとcanvgのスケーリングの問題

これはある種の特定の問題ですが、私が解決策を見つけることができれば、ある時点で他の誰かにとって役立つかもしれないと思います。

ブラウザ側でHighchartsグラフの一部をPNGに変換する必要があります。作成者がグラフを作成するときに、グラフは自動的にPNGに変換され、そのPNGは指定されたグラフのJSコードとともに保存されるという考え方です。次に、JSがオプションではない状況で、そのPNGバージョンを提供できます。私はこれをすべてcanvgライブラリを介して機能させており、完璧です。

よくほとんど。そこにあるすべての高dpi画面のために、グラフが通常表示される2倍の大きさのPNGを拡大する必要があります。そうすれば、PNGバージョンはiPhone/iPadなどで見栄えがします...

canvgにはいくつかのスケーリングオプションがあるので、それらを使用しようとしました。しかし、それはそれが崩壊し始めるところです。グラフは正しくスケーリングされますが、Highchartsオブジェクトのどこかに、他のすべてと一緒にスケーリングされないボックスがあり、結果のスケーリングされたグラフは、美しくスケーリングされたグラフの左上隅だけを示します。

私はcanvgコードを見て、JSの能力が何が起こっているのかを理解するのに十分ではないことにすぐに気づきました。これは、Highchartsの終わりでも同じです。

誰かがこれに対するアイデアを持っているか、簡単な解決策を知っているなら、私は非常に感謝するでしょう。

問題を再現するために、私がまとめたこのJSFIDDLEの例を見ることができます。

http://jsfiddle.net/UVNvh/3/

そして、そのJSFIDDLEページがめちゃくちゃになったり、何らかの理由で消えたりした場合のコードは次のとおりです。