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

推薦する

LeetCode の SQL 実装 (175. 2 つのテーブルの結合)

[LeetCode] 175.2つのテーブルを結合する表: 人物+-------------+--...

xtrabackup による MySQL データベースのバックアップと復元

mysqldump バックアップは、その独自の特性 (テーブルのロック、基本的に挿入スクリプトまたは...

モバイルウェブ画面適応(rem)

序文最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (r...

Linux lessコマンド例の詳細な説明

ファイル名が少ないファイルを表示ファイル名を少なく | grep -n コンテンツを検索内容に応じて...

ウェブページでよく使用される共有コードの完全なリスト(フロントエンドに必須)

コードをコピーコードは次のとおりです。 1. 新浪微博<a href="http:/...

Vueはボタン切り替え画像を実装します

この記事では、ボタン切り替え画像を実現するためのVueの具体的なコードを例として紹介します。具体的な...

Vueはページに透かし効果を追加する機能を実装します

最近、あるプロジェクトに取り組んでいたとき、ページに透かし効果を追加するように依頼されました。さっそ...

Webデザインチュートリアル(6):デザインへの情熱を持ち続ける

<br />前の記事:Webデザインチュートリアル(5):Webビジュアルデザイン。 1...

Nginx ログ出力のリクエスト後パラメータを設定する方法

【序文】当プロジェクトの SMS 機能は、第三者に接続することです。第三者からの元の受信確認要求は ...

Javascriptでシンプルなナビゲーションバーを実装

この記事では、参考までに、シンプルなナビゲーションバーを実装するためのJavascriptの具体的な...

CSS3 の Flex レイアウトの詳細な分析

Flexbox レイアウト モジュールは、コンテナー内のスペースをより効率的に配分する方法を提供する...

あまり使われていない、または誤解されている HTML タグ 10 個

ここでは、あまり使われていない、または誤解されている 10 個の HTML タグを紹介します。あまり...

Linux での Firewalld の高度な設定の使用に関する詳細な説明

IPマスカレードとポート転送Firewalldは2種類のネットワークアドレス変換をサポートしています...

mysqlは2つ以上のフィールドがNULLであるレコードを見つける問題を解決します

コアコード /*-------------------------------- 2つ以上のフィール...

純粋な CSS で実装された 3 つの通知バーのスクロール効果

序文通知バー コンポーネントは、比較的一般的なコンポーネントです。基本的に、すべてのサイトにこのよう...