SVGと.JPGを1つのイメージに結合しますか？

マップアプリケーションのSVG/VML（Raphael JS経由）設定を使用してウェブサイトを構築しており、SVGを使用して背景画像の上にグラフィックを表示しています。これは画面上でうまく動作し、ハードコピーマップをオーバーレイで印刷する場合に有効です。ただし、この設定が離れている場合は、SVGオーバーレイ付きのマップイメージをローカルの.JPGファイルに保存する場合です。SVGと.JPGを1つのイメージに結合しますか？

具体的には、画像の上にSVG/VML要素がある場合、ほとんどのブラウザの標準の右クリック機能を使用して[画像を保存...]にすることはできません。地図を右クリックすると、ユーザーは地図画像を保存できますが、オーバーレイは保存されません。オーバーレイされたSVG要素を右クリックすると、要素を調べたり、HTMLをいくつか保存することができます（ブラウザによって異なります）。

私の主な質問はここにあります。画像とSVG要素を取り込み、それらを組み合わせることができますか（オプションは公開されていますがクライアント側が望ましい）、JPG、.PNGなどの画像を右クリックすることができます要求に応じて保存、またはユーザーのPCにダウンロードできますか？あなたがする必要がどのような

出典

2012-03-29 theDom

オプションにはImageMagickが含まれていますか？ http://www.imagemagick.org/script/magick-vector-graphics.php – PinnyM

可能な重複：http://stackoverflow.com/questions/4086703/convert-raphael-svg-to-image-png-etc-client -side http://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser/3976034#3976034 – JayC

私はImagickのPHP拡張モジュールを探しています私がやろうとしていること。重複している可能性のあるスレッドに関しては、私はそれらの両方を見てきました。キャンバスとIEの欠如に依存しているため、ブラウザに依存しないアプリケーションとなるのは困難です。そのスレッドと両方のスレッドは、SVG自体をグラフィックに変換するだけであり、そのSVGグラフィックと他のものとを単一の画像にマージするのではない。 – theDom

ではなく、JPGやSVGを重ねると、次のとおりです。

元の画像を撮るメモリにその上にSVGファイルで線を引く
出力単一の画像としてそのブラウザにJPGを送信します。当然の

これは、あなたがSVGを解釈できるようにする必要があることを意味...

出典

2012-03-29 15:30:01

Ok ...これは、標準のクライアントサイドJavaScriptなどを使用して可能ですか？イメージ内の線を描画することで意味することが正確にわからない – theDom

描画はブラウザで行われません（JavaScriptの場合と同じですが）、要求を処理するプロセス内のサーバー上で行われます。 –

一つの可能性は、SVGに画像を埋め込み、その後、合成画像とデータURLを生成することであろう。次の例では、png形式でこれを実現しています。

var datauri = c.toDataURL('image/png');

ここで、cはフォーマットされたSVGレイヤーです。詳細は、このオープンソースエディタhttp://code.google.com/p/svg-edit/をsvgcanvas.jsとsvg-editor.jsファイルでチェックしてください。SVGをpngファイルとしてエクスポートする方法の良い例です。初めは分かりにくいですが、よく書かれています。

出典

2012-03-30 23:56:20 Jlange

セキュリティ制約のためにキャンバス要素にSVGをレンダリングしようとすると、恐ろしい時間がかかることになります（Firefoxなどではうまくいきませんでした）。ここで

は、しかし考えです：SVGに<image>タグ

を使用して

SVG DOM内の場所、あなたのイメージはにcanvgのtoDataURLメソッドを使用しcanvgライブラリ
を通して、あなたのSVGコードを渡しますイメージを生成する

出典

2012-04-01 20:08:17 Emil

SVGと.JPGを1つのイメージに結合しますか？

答えて

関連する問題