HTML2 キャンバス SVG が認識されない場合の解決策

HTML2 キャンバス SVG が認識されない場合の解決策

ウェブページを画像としてキャプチャする新機能があったので、人気のhtml2canvasを使ってみました。スムーズにできたと思ったのですが、後からウェブページ上のフローチャートの接続線がスクリーンショットに写っていないことに気付きました。そこで、Baidu と Bing でいろいろ検索してみましたが、完全なコードはないようでした。今、自分で解決したので、コードを共有します。

まず、canvg.js をダウンロードする必要があります。github アドレス: https://github.com/canvg/canvg

関数 showQRCode() {
                スクロールします(0, 0);
               
                if (typeof html2canvas !== 'undefined') {
                    // 以下は svg の処理です var nodesToRecover = [];
                    var ノードを削除する = [];
                    var svgElem = $("#divReport").find('svg'); //divReport は画像としてキャプチャする必要がある DOM の ID です
                    svgElem.each(関数(インデックス、ノード) {
                        var 親ノード = node.parentNode;
                        var svg = node.outerHTML.trim();

                        var キャンバス = document.createElement('キャンバス');
                        canvg(キャンバス、SVG); 
                        ノードスタイルの位置が
                            キャンバスのスタイルの位置 += ノードのスタイルの位置;
                            キャンバススタイルを左にドラッグします。
                            キャンバススタイルトップ += ノードスタイルトップ;
                        }

                        ノードを回復します。push({
                            親: 親ノード、
                            子: ノード
                        });
                        親ノードから子ノードを削除します。

                        ノードを削除する.push({
                            親: 親ノード、
                            子: キャンバス
                        });

                        親ノードに子を追加します。
                    });
                    html2canvas(document.querySelector("#divReport"), {
                        レンダリング時: function(canvas) {
                            var base64Str = canvas.toDataURL(); //base64 コード、画像に変換可能 //...

                            $('<img>',{src:base64Str}).appendTo($('body'));//元のウェブページに直接表示します} }); } }

html2+canvas svg が認識されない問題の解決方法に関するこの記事はこれで終わりです。html2 canvas svg が認識されないことに関する関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  州と市町村の連携を簡単に実現するJavaScript

>>:  Linux で Docker を使用して MySQL をインストールする手順

推薦する

ラベルとボタンを削除し、背景画像の点線/影を追加すると完璧な解決策になります

ユーザーが登録すると、ラベルをクリックして確認コードを変更します。クリックするとラベルに影の部分がで...

MySQL 8.0.13 のインストールと設定方法のグラフィックチュートリアル (Win10 の場合)

MySQL 8.0.13 のインストールと設定方法を皆さんと共有したいと思います。お役に立てれば幸...

wgetはウェブサイト全体(サブディレクトリ全体)または特定のディレクトリをダウンロードします

wgetコマンドを使用して、親ディレクトリの下のサブディレクトリ全体をダウンロードします。親ディレク...

Nginx の動的および静的分離実装ケースのコード分析

静的と動的の分離動的リクエストと静的リクエストはミドルウェアを通じて分離され、不要なリクエストの消費...

Windows 8.1 で MySQL5.7 のルート パスワードを忘れた場合の解決方法

【背景】最近勉強中に非常に恥ずかしいことに遭遇しました。MySQL のパスワードを忘れてしまい、My...

Dockerは同じIPネットワークセグメントとの接続を実現する

最近、Docker とホストが同じネットワーク セグメント上で通信する問題を解決し、そのプロセス全体...

nginx を使用してカナリアリリースをシミュレートする方法

この記事では、ブルーグリーン デプロイメントと、nginx を使用してカナリア リリースを最も簡単な...

Docker nginx + https サブドメイン設定の詳細なチュートリアル

今日はたまたま友人のサーバーの移転を手伝うことになり、サーバーの基本的な設備の設定を行ったのですが、...

HTML で 2 つの div タグの間に垂直線を描く方法

最近、インターフェースを描画しているときに、インターフェースに垂直線を描画し、この垂直線の高さが親 ...

CSS3 box-shadow プロパティの詳細な例

CSS3 - 影の追加(ボックスシャドウの使用) CSS3 - div またはテキストに影を追加する...

WeChat アプレット開発フォーム検証 WxValidate の使用

個人的には、WeChat アプレットの開発フレームワークは VUE と概ね似ていると感じていますが、...

MySQL シリーズ 3 基礎

目次チュートリアルシリーズ1. MySQL の紹介2. MySQLの開発履歴3. MariaDBの基...

IPとポートが接続可能かどうかを検出する方法

Windows コマンドテルネット形式: telnet IP ポート場合: テルネット 191.1....

Docker ベースの ELK ログ システムを構築する方法

背景要件:ビジネスがどんどん大きくなると、サーバーの数も増え、さまざまなアクセスログ、アプリケーショ...

MySQLを定期的にバックアップしてQiniuにアップロードする方法

ほとんどのアプリケーション シナリオでは、緊急時に備えて重要なデータをバックアップし、安全な場所に保...