25

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

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

私がグーグルで検索すると、WebアプリケーションからクリップボードにSVG画像を取得する問題に関する情報がほとんどないことに驚いています。

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

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

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

4

4 に答える 4

15

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

これを行うには、base64でエンコードする必要があります。jsを使用してサーバー側またはクライアント側で実行できます。画像タグは次のようになります...

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

R0lGODlhEAAQAMQ...base64でエンコードされたsvgはどこにありますか。

于 2012-09-04T05:16:55.577 に答える
2

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

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

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

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

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

于 2012-09-04T01:04:09.857 に答える
2

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

HTML5 Clipboard APIでいくつかのトリックを試しましたが、Chromeがmime-typeをシステムクリップボードにエクスポートできないという問題で終わりました。関連するバグレポートとそれに関連するjsfiddleリンクはこちらhttps://code.google.com/p/chromium/issues/detail?id=504700

于 2015-07-08T08:33:41.200 に答える
1

私はプロジェクトで同じ問題に直面しました。顧客はかなり複雑なチャートを望んでいました。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. svgコードに「display：none：」を追加しました。そうしないと、同じ画像の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番目の画像のソースは、BASE64でエンコードされたバージョンのsvgで埋められています。変換後、画像が表示されます。これで、svgイメージとまったく同じイメージが得られましたが、イメージをダウンロードまたはコピーすることができます。

これがあなたのウェルとして役立つことを願っています。

于 2019-06-27T20:26:24.497 に答える