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

最近、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");//これは実際に変換しています。キャンバスは画像に変換され、画像のすべてのコンテンツ データが返されます。画像は次のように表示できます:

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

これは svg->canvas->image からの実装メソッドです。はい、ブラウザーによって svg と Canvas のサポートが異なるため、この場合、少なくともコントロールには常に .最終的に画像しか使用できない場合でも、正しく表示する方法。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。