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

推薦する

JS の FileReader を介して .txt ファイルの内容を取得する方法

目次JSはFileReaderを通じて.txtファイルの内容を取得します。 .txtファイルの読み取...

Portainer を使用して複数の Docker コンテナ環境を管理する方法を説明します。

目次Portainerは複数のDockerコンテナ環境を管理します2. Dockerを管理する2.1...

ブラウザタブの左端に表示されるウェブサイトのアイコンを設定します

この文の目的は何ですか?コードをコピーコードは次のとおりです。 <link rel="...

Dockerコンテナのいくつかの保存方法の詳細な説明

目次前面に書かれた複数のストレージマウント方法1.バインドマウント2. 巻数3.tmpfsマウントス...

Web プロジェクトでの SQL インジェクションの防止

目次1. SQLインジェクションの概要2. SQLインジェクション攻撃の全体的な考え方SQLインジェ...

Reactプロジェクトで画像を導入するいくつかの方法

imgタグは画像を導入しますreactは実際にはjsリーダー関数を介してページをレンダリングするため...

Tomcat8はcronologを使用してCatalina.Outログを分割します

背景tomcat によって生成された catalina.out ログ ファイルが分割されていない場合...

カルーセル効果を作成するためのjs

カルーセルはフロントエンド開発において比較的重要なポイントだと思います。ネイティブjsの知識ポイント...

MySQL 正規表現 (regexp と rlike) の検索機能の例分析

この記事では、例を使用して MySQL 正規表現 (regexp および rlike) の検索機能を...

SSL を実装するために nginx を設定する方法の例

環境説明サーバーシステム: Ubuntu 18.04 64ビットnginx: 1.14この記事では主...

HTTP ステータス コード

このステータス コードは、リクエストのステータスに関する情報を提供し、サイトとリクエストされたページ...

HTML+CSSを使用してマウスの動きを追跡する

ユーザーがプライバシーを意識するようになり、オンライン トラッキングに対する予防策を強化するにつれて...

MySQLでorder byを使用せずにランキングを実装する3つの方法のまとめ

ビジネスを想定: 2位の従業員の給与情報を見るデータベースを作成する emps が存在する場合はデー...

CSS3でハートを描く

成果を達成する要件/機能: CSS + HTML を使用してハートを描く方法。分析:正方形と 2 つ...

Linux でのデータベースのスケジュールバックアップの実装スクリプト

目次シナリオ: サーバーデータベースを毎日定期的にバックアップする必要がある1. まずバックアップス...