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

推薦する

クールなバーコードエフェクトの作り方を教えます

声明:この記事では、Web ページ制作技術を使用して問題を包括的に解決するという考え方を反映して、W...

bash スクリプトで ssh/scp コマンドにパスワードを渡す方法の詳細な説明

SSHPASSをインストールする最新のオペレーティング システムでは、sshpass パッケージはデ...

MySQL 5.7 共通データ型

——「MySQL in Simple Terms (第 2 版)」からのメモ数値型整数型バイト最小最...

jQueryは広告の表示と非表示のアニメーションを実装します

数秒後に広告が表示されて消えることがよくあります。この機能を実装するには、JQuery フレームワー...

MySQL LOAD_FILE() 関数メソッドの概要

MySQL では、LOAD_FILE() 関数はファイルを読み取り、その内容を文字列として返します。...

24 の実用的な JavaScript 開発のヒント

目次1.配列を初期化する2. 配列の合計、最大値、最小値3. エラー値をフィルタリングする4. 論理...

vue+rem カスタムカルーセル効果

vue+remを使用したカスタムカルーセルチャートの実装は参考までに。具体的な内容は以下のとおりです...

MySQLソースコマンドの使い方の紹介

目次ネット上の質問から生まれた思考MySQL ソースコマンドネット上の質問から生まれた思考今日仕事中...

固定、流動的、柔軟なウェブページレイアウトの長所と短所の分析

ウェブデザイナーを長い間悩ませてきた疑問があります。それは、固定レイアウト、流動的レイアウト、柔軟レ...

Win10 での MySQL 8.0 ログインでユーザー 'root'@'localhost' のアクセスが拒否される (パスワード使用: YES) 問題の解決方法

最近、MySQL を学び始めました。インストールはスムーズに進み、インターネット上の既成のチュートリ...

SQL ストアド プロシージャの取得、データ取得、プロセス分析

この記事は主に、SQL のストアド プロシージャから返されたデータを取得するプロセスの分析を紹介しま...

SpringBoot と Docker の統合の詳細なプロセス

目次1. デモプロジェクト1.1 インターフェースの準備1.2 構成の準備2. Dockerがリモー...

Linux システムで crontab を使用して MySQL データベースを定期的にバックアップする方法

システムの crontab を使用して定期的にバックアップ ファイルを実行し、バックアップ結果を日付...

mysqlとnavicat間の接続を確立する際の1251エラーを解決する

コンピュータを再インストールし、最新バージョンのMySQLデータベースをインストールしました。その結...

MySQL MyISAM と InnoDB の違い

違い: 1. InnoDB はトランザクションをサポートしていますが、MyISAM はサポートしてい...