HTML5_html5 チュートリアルスキルにおける SVG キャンバスと画像の間の変換アイデアのコード-H5 チュートリアル-php.cn

HTML5_html5 チュートリアルスキルにおける SVG キャンバスと画像の間の変換アイデアのコード

WBOY

リリース： 2016-05-16 15:48:31

オリジナル

1338 人が閲覧しました

最近、Web ページの内容の一部をテキストに変換し、元の Web ページを PDF に変換して添付ファイルとして上司にメールで送信する必要がありました。レポート型のWebサイトなので、HTML5でのコントロール開発はcanvasかsvgのみです。ここではsvgを使用したコントロールがいくつかありますが、svgはFoxMailのメール本文では正常に表示できないため、svgをcanvasに変換することを検討しました。と表示しましたが、その後キャンバスが正常に表示できないことが分かり、結局canvasタグを再度画像形式に変換することで解決しました。以下に実装プロセスを簡単に紹介します。以下は svg タグです

コードをコピーします

コードは次のとおりです:

svg タグとコンテンツ:

var svgHtml = svgContainer.innerHTML();

svg を Canvas に変換するには、公式 Web サイトからダウンロードできる Google のプラグイン canvg を使用する必要があります。またはリモートで直接引用

次のステップでは、プラグインの canvg(canvasId,svgHtml) メソッドを呼び出して Canvas に変換します。このメソッドの最初のパラメータは Canvas タグの ID で、2 番目のパラメータは Canvas タグです。これは当然 svg タグの内容です。このようにして、svg が Canvas に変換されます。

次に、Canvas を画像に変換します。

var imgSrc = document.getElementById( CanvasId).toDataUrl("image/png");//これは実際に変換しています。キャンバスは画像に変換され、画像のすべてのコンテンツデータが返されます。画像は次のように表示できます:

コードをコピーしますコードは次のとおりです: