web-dev-qa-db-ja.com

SVG画像をブラウザーからクリップボードにコピー

ユーザー入力を取り、工学計算を行い、フォーマットされたレポートまたはグラフィックを表示するWebアプリケーションを開発しています。グラフィックは工学図であり、円グラフのような標準的なグラフであるとは限りません。アプリケーションの主な機能は、ユーザーがこれらの図をブラウザからWordまたはExcelドキュメントにコピーできるようにすることです。

クライアントで生成されたSVGを使用するか、サーバー側で生成されたビットマップを使用するかを選択する必要があります。私はSVGアプローチを好み、プロトタイピングは適切に見えますが、SVGグラフのコピーは、特にグラフがdivに表示されている場合（つまり、ページ全体が.svgではない場合）、ブラウザー間で一貫してサポートされていないようです。たとえば、IEはドロップダウンに「コピー」を表示しますが、SVGグラフィックの一部のみをクリップボードにコピーします。Chromeは、 SVGグラフィックを右クリックします。

私がググってみたら、WebアプリケーションからクリップボードにSVG画像を取得する際の問題に関する情報が少ないことに驚きます。

私の質問この問題を解決した読者：

  1. JavaScriptを使用して、より大きなDOMの一部であるSVG要素をクリップボードに取得する一貫した方法はありますか。

  2. ブラウザからクリップボードにグラフィックスを取得するという私の要件に基づく他の推奨事項はありますか？

google-chromesvgclipboard
22
Fritz45

svgをsvg要素として表示する代わりに、imgタグで表示します。これにはいくつかの制限があります（カスタムフォントや埋め込みスクリプトを表示することはできませんが、これはユースケースではないようです）。利点は、画像から期待するとおりに動作することです（ドラッグアンドドロップ、右クリックアンドコピーなどが可能）。

これを行うには、base64でエンコードする必要があります。あなたはそれをjsでサーバーサイドまたはクライアントサイドで行うことができます。イメージタグは次のようになります...

<img src="data:image/svg;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolf" width="..." height="..." alt="diagram" />

どこ R0lGODlhEAAQAMQ...はbase64でエンコードされたsvgです。

13
methodofaction

Javascriptとクリップボードはa **の問題です。

私が知っているあなたの状況に対する1つの回避策があります：

それが本当のSVGファイルである場合、Chromeで画像を右クリックし、[要素の検査]を選択します。ブラウザーコンソールが開き、インスペクターで選択できるSVG要素が開きます。インスペクターでsvgタグを右クリックし、「コピー」または「HTMLとしてコピー」を選択します（選択を正確に思い出せません）

そのテキストをテキストファイルに貼り付け、SVG拡張子を付けてファイルを保存します。その後、任意のブラウザまたはSVG編集プログラムで開くことができます。 Inkscape は、XMLスタイルエディターでSVGファイル全体を表示および編集できるため、編集およびデバッグに適しています。

**申し訳ありません-リクエストの最初の部分を逃しました。それはトリッキーになります。私はその部分を手伝うことができないと思います。ただし、コピーアンドペーストはおそらく最善の方法ではありません。 SVGファイルとExcelファイルの両方を操作するためのPHPクラスがあり、それがおそらく進むべき道でしょう。

1
dgo

SVGコンテンツをプレーンXMLテキストとしてクリップボードにコピーできましたが、Inkscape（SVGでの作業に使用）が クリップボード内のテキストをSVGとして認識しない であるため、役に立たないように見えました。 SVGのテキストをコピーするだけでは不十分で、ブラウザはmime-typeをimage/svg+xmlに設定する必要があります。

HTML5クリップボードAPIでいくつかのトリックを試しましたが、ChromeはMIMEタイプをシステムクリップボードにエクスポートできません。関連するバグレポートとjsfiddleリンクがここにあります- https://code.google.com/p/chromium/issues/detail?id=5047

1
anatoly techtonik

プロジェクトで同じ問題に直面しました。顧客は、かなり複雑なチャートを望んでいました。 svgを使用して開発することにしました。完璧に機能しましたが、顧客はグラフを画像としてダウンロードできることを望んでいました。インターネットで検索したところ、saveSvgAsPng（ https://www.npmjs.com/package/save-svg-as-png ）が見つかりました。それは私たちにとってトリックでした。

グラフはこのようなページにあります：

<svg id="graph1" style="width: 700px; height: 700px">
....
.....
...
</svg>

グラフは表示されますが、ダウンロードやコピーはできません。だから、ここに私が取ったステップがあります：

  1. 上記のパッケージをインストールしました。
<script src="/path/to/lib/save-svg-as-png/lib/saveSvgAsPng.js"></script>
  1. 「display：none：」をsvgコードに追加しました。そうしないと、同じ画像の2つのインスタンスが生成されます。
<svg id="graph1" style="width: 700px; height: 700px; display: none">

 <!-- // code goes here  -->


</svg>
  1. Svgグラフの宣言の直後に、新しい画像を追加しました。この画像は、svg画像の新しいpng画像表現のプレースホルダーです。ロード中に画像がちらつくのを防ぐために、最初にそれを非表示にします。ソースは最初は指定されていません：
<img id="graph1_as_png" src="" width="700" height="700" style="display: none">
  1. 新しく追加した画像の後に、コードを数行追加しました。それを変換トリックに追加しました。
<script>

    svgAsPngUri(document.getElementById("graph1")).then(uri => {
      $("#graph1_as_png").attr('src', uri).show();
    });

</script>

2番目のイメージのソースは、svgのBASE64エンコードバージョンで埋められます。変換後、画像が表示されます。これで、svgイメージとまったく同じイメージができましたが、イメージをダウンロードまたはコピーする可能性があります。

これがあなたの役に立つことを願っています。

0
eheydenr