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 をインストールする手順

推薦する

TSオブジェクトのスプレッド演算子とレスト演算子の詳細な説明

目次概要オブジェクトの残り属性オブジェクトの拡張プロパティオブジェクトの浅いコピーを作成するkeyo...

ウェブページ作成に役立つコード

<br />ホームページの右側にあるスクロールバーを削除するにはどうすればよいですか? ...

SQL 集計、グループ化、並べ替え

目次1. 集計クエリ1. COUNT関数2. SUM関数3. AVG関数4. MAX関数とMIN関数...

Linux lnコマンドの使用

1. コマンドの紹介ln コマンドは、ファイルのリンクを作成するために使用されます。リンクは、ハード...

MySQLインデックス最適化分析に関する簡単な説明

記述した SQL クエリが遅いのはなぜですか?作成したインデックスが頻繁に失敗するのはなぜですか?こ...

MySQLはイベントを使用してスケジュールされたタスクを完了します

イベントでは、SQL コードを 1 回または一定の間隔で実行することを指定できます。通常、複雑な S...

HTML タグでの this の使用法の紹介

例えば:コードをコピーコードは次のとおりです。 <html> <ヘッド> &...

base target="" はフレームを開くためのベースリンクのターゲットを指定します

<base target=_blank> は、基本リンクのターゲット フレームを新しいペ...

HTML の基礎_一般的なタグ、共通タグ、表

パート 1 HTML <html> -- 開始タグ<ヘッド>ウェブページ上の...

MySQLとOracleの違いのまとめ(機能性能の比較、選択、使用時のSQLなど)

1. 同時実行性同時実行性は OLTP データベースの最も重要な機能ですが、同時実行性にはリソース...

データベースSQL文の最適化

最適化する理由:実際のプロジェクトが開始され、データベースが一定期間稼働した後、初期のデータベース設...

MySQL はパスワード強度の検証をオフにします

パスワード強度検証について: [root@mysql mysql]# mysql -uroot -p...

Linux sshのデフォルトのリモートポート番号を変更する6つの手順

Linux のデフォルトの ssh リモート ポートは 22 です。デフォルトのポートは、悪意のある...

MySQL 権限制御の詳細分析

目次1. グローバルレベル2. データベースレベル3. 表面レベル4. 列レベルの権限5. サブルー...

Linuxのpasswdコマンドの使用

1. コマンドの紹介passwd コマンドは、ユーザー パスワード、アカウント ロック、パスワードの...