-1

.svg 画像が読み込まれた div またはキャンバスのスナップショットを撮りたいです。たとえば、svg画像が含まれていないため、html2canvasを試しました。他のページ データのスナップショットを取得しました。

4

1 に答える 1

0

できます(このデモに示すように- 一番下のコピーは、svg を含む抽出されたキャンバスです) が、例外が 1 つあります。

SVG に外部参照がある場合、画像を抽出することはできません。BlobSVG が画像を使用する場合、またはを使用してインライン化する必要がありますdata-uri。そうしないと、セキュリティが攻撃されます。

SVG のレンダリング方法に影響を与えるその他の注意事項 (この記事から) (キャンバス コンテキストで使用する場合):

制限

セキュリティ上の理由から、Gecko は SVG コンテンツを画像として使用する際にいくつかの制限を設けています。

  • JavaScript が無効になっています。
  • 外部リソース (画像、スタイルシートなど) を読み込むことはできませんが、BlobBuilder オブジェクトの URL または data: URI を介してインライン化されている場合は使用できます。
  • :visited-link スタイルはレンダリングされません。
  • プラットフォーム ネイティブのウィジェット スタイル (OS テーマに基づく) が無効になっています。

上記の制限は画像コンテキストに固有のものであることに注意してください。SVG コンテンツが直接表示される場合、または <iframe>、<object>、または <embed> 要素を介してドキュメントとして埋め込まれている場合は適用されません。

これは Gecko に言及していますが、他のブラウザにも当てはまります。

それに加えて、キャンバス上で SVG を使用して画像として抽出することもできます。これを回避する唯一の方法 (スナップショットの取得に関して、および SVG を手動で解析して外部コンテンツをインライン化する場合を除く) は、画像リンクをサーバーにリダイレクトし、そこからページと画像を読み込むことです。 -SVG ファイルを処理 (変換) します。

于 2013-11-04T18:16:35.793 に答える