JS でページのスクリーンショット機能を実装する方法

JS でページのスクリーンショット機能を実装する方法

「ページのスクリーンショット」は、ページポスターの生成、ポップアップ画像の共有など、フロントエンドで頻繁に遭遇する要件です。ブラウザにはネイティブのスクリーンショット API がないため、ニーズを満たすにはキャンバスを使用して画像をエクスポートする必要があります。

実現可能性

  1. 解決策1: DOMをキャンバスに書き換え、キャンバスのtoBlobまたはtoDataURLメソッドを呼び出して、すぐにQiniu Cloudまたはサーバーにアップロードします。
  2. 解決策2: サードパーティのライブラリhtml2canvas.jsを使用してキャンバスを実装し、ページの既存のDOMを変更せずにキャンバスをエレガントに生成します。

ソリューションの選択

解決策 1: 各 DOM 要素の計算スタイルを手動で計算し、キャンバス上の要素のサイズ、位置、その他の属性を計算する必要があります。

解決の難しさ 1

  • 既存の HTML ページを破棄し、キャンバスを使用して書き直す必要があります。
  • ページ構造が複雑な場合、キャンバスを使用して再構築するのは簡単ではありません。
  • 一定のキャンバス基盤を用意します。

解決策 2: プロジェクトは Github で 20,000 を超えるスターを獲得しており、作成者が現在も積極的にメンテナンスを行っています。 API は非常にシンプルで、既存のプロジェクトですぐに使用できます。

html2キャンバス

これは共通の要求であるため、コミュニティには成熟した解決策があります。まずはコミュニティの解決策を試してください。

<div id="キャプチャ" スタイル="パディング: 10px; 背景: #f5da55">
    <h4 style="color: #000; ">こんにちは世界!</h4>
</div>
html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(キャンバス)
});

上記は公式サイトでの使用例です。新しいキャンバス DOM が Web ページに表示されます。次にキャンバスを画像に変換する必要があります。ここでは、キャンバスのネイティブ toDataURL メソッドと toBlob メソッドを使用して Qiniu Cloud に移動します。

ご使用の際はご注意ください。生成されたキャンバスにクロスドメイン画像がある場合は、allowTaint を true に設定する必要があります。

ネイティブ キャンバス実装の場合、キャンバスを描画する前に、すべてのクロスドメイン画像リクエストを完了する必要があります。解決策は2つある

  • 解決策 1: HTML に img タグを記述し、src に対応する画像 URL を記述します。欠点は明らかで、ページのレイアウト構造が損なわれます。
  • 解決策 2: js と new Image() を使用します。 src を対応する画像 URL に設定し、onload コールバックで関連する操作を処理します。利点: 最も実現可能ですが、コールバック地獄の問題があります。 Promiseを使って書き直してみましょう
関数 asyncImage(url) {
    const img = 新しい画像();
    url = 画像ファイル
    img.setAttribute('crossOrigin', '匿名');
    新しい Promise を返します ((resolve, reject) => {
        img.onload = () => 解決(img);
        img.onerror = 拒否;
    });
}

はい、完了しました。要件を今すぐ提供できますか?喜んでテストを提出しましたが、モバイル端末でテストしたところ、生成された写真が非常にぼやけていることがわかりました。これは機能しません。明らかにはるかに低いです (テストに合格しませんでした orz)。

GitHubには対応するソリューションポータルがあり、この回答は多くの人の問題を解決します

基本原則: キャンバスの幅と高さを 2 倍にします。 CSS を使用して、キャンバス スタイルを 1 倍のサイズに設定します。

    var shareContent = ターゲット要素; 
    var width = shareContent.offsetWidth; 
    var 高さ = shareContent.offsetHeight; 
    var キャンバス = document.createElement("キャンバス"); 
    var scale = 2 || window.devicePixelRatio ; //デバイスのピクセル比を使用することもできます canvas.width = width * scale; 
    canvas.height = 高さ * スケール; 
    キャンバスのスケールを取得します。 

    var オプション = {
        スケール: スケール、 
        キャンバス: キャンバス、 
        ログ記録: true、 
        幅: 幅、 
        高さ: 高さ 
    };
    html2canvas(shareContent, opts).then(関数(canvas) {
        var コンテキスト = canvas.getContext('2d');

        var img = Canvas2Image.convertToImage(キャンバス、キャンバス.幅、キャンバス.高さ);

        document.body.appendChild(画像);
        $(img).css({
            "幅": キャンバス.幅 / 2 + "px",
            "高さ": キャンバス.高さ / 2 + "px",
        })
    });

原理はすでに分かっていますが、実際に操作してみるとイメージがはるかに鮮明になります。しかし、問題はまだ解決されていません。

サイズを小さくすると鮮明さは向上しますが、画像は元のサイズである必要があります。 。

何度も失敗した後、私は最終的にフレームワークの使用を断念することにしました。ネイティブ キャンバスを使用して作成するだけです。

キャンバスの絵

高解像度の画面を備えたデバイスでは、キャンバスに描画された画像、テキスト、線、図形がぼやけて見える場合があります。これは、GitHub から hidpi-canvas を導入することで効果的に解決できます。

  1. まず、GitHub にアクセスして、hidpi-canvas.js ファイルをダウンロードします: Portal;
  2. hidpi-canvas.js ファイルをプロジェクトにインポートします。
  3. 比率値を取得するには、getPixelRatio() 関数を呼び出します。
  4. drawImage() では、幅と高さを比率で乗算します。
  5. 最終的なキャンバスはブログとしてエクスポートされ、ファイル オブジェクトに変換されて Qiniu Cloud にアップロードされます。

コアコードは以下のとおりです

    関数 asyncImage(url) {
        const img = 新しい画像();
        url = 画像ファイル
        img.setAttribute('crossOrigin', '匿名');
        新しい Promise を返します ((resolve, reject) => {
            img.onload = () => 解決(img);
            img.onerror = 拒否;
        });
    }
    非同期関数drawCanvas(){
        var キャンバス = document.querySelector('キャンバス');
        var コンテキスト = canvas.getContext('2d');
        var ratio = getPixelRatio(context); // キーコード canvas.width = 300 * ratio; // キャンバスの幅 canvas.height = 300 * ratio; // キャンバスの高さ var divWidth = 300 * ratio; // コンテンツを中央に配置するために使用します var divHeight = 300 * ratio; // コンテンツを中央に配置するために使用します const image = await asyncImage('picUrl')
        定数画像幅 = 550
        定数画像高さ = 300
        context.drawImage(this, 50, 50, 画像幅 * 比率, 画像高さ * 比率)
        // その他のコード
        const Blob = canvas.toBlob((Blob)=>{
            //Qiniu Cloudにアップロードします});
    } 

最終的に生成された画像はようやく鮮明になりました...DOM の offsetWidth に応じてさまざまな画面に適応するだけです。

要約する

画像の鮮明さの要件が高くない場合、または画像の要件がサムネイルを生成することである場合。 html2canvas を使用することは非常に良い選択です。
そうでないと、キャンバスで描いた絵の方が鮮明になります。

JSでページスクリーンショット機能を実装する方法についての記事はこれで終わりです。より関連性の高いJSページスクリーンショット機能のコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。皆様の今後の123WORDPRESS.COMへのご支援をお待ちしております。

以下もご興味があるかもしれません:
  • JavaScript スクリーンショット機能実装コード
  • jsはclipboardDataを使用してスクリーンショットと貼り付け機能を実装します
  • Phantomjs を使用して Python で Web ページのスクリーンショットを撮る方法
  • PhantomjsとNodeを使用してWebページのスクリーンショットを撮る方法

<<:  VMware Workstation のインストール (Linux カーネル) Kylin グラフィック チュートリアル

>>:  MySql のクラッシュとサービスの起動失敗の解決策

推薦する

MySQLでBLOBデータを処理する方法

具体的なコードは次のとおりです。 パッケージ epoint.mppdb_01.h3c; java.i...

MySQL の pid とソケットの詳細な説明

目次1. pidファイルの紹介2.ソケットファイルの紹介要約:ソケット ファイル: Unix ドメイ...

docker の run/cmd/entrypoint の違いの詳細な説明

Dockerfile では、run、cmd、entrypoint はすべてコマンドを実行するために使...

Vue v-onディレクティブの使用について

目次1. イベントのリスニング2. イベントパラメータを渡す3. イベント修飾子ケース1: クリック...

MySQLで数千万のテストデータを素早く作成する方法

述べる:この記事で扱うデータ量は 100 万です。数千万のデータが必要な場合は、量を増やすだけで済み...

...

jQueryはバウンドボールゲームを実装します

この記事では、バウンドボールゲームを実装するためのjQueryの具体的なコードを参考までに共有します...

Vue の DOM の非同期更新の簡単な分析

目次Vue が DOM を非同期更新する原理1 実際の DOM 要素を取得できるのはいつですか? 2...

Vue ルーターにパラメータを渡すときにページを更新するとパラメータが失われる問題に対処する方法

目次概要方法1: params経由でパラメータを渡す方法2: クエリを通じてパラメータを渡す方法3:...

Linux での MySQL のインストールに関するチュートリアル

目次1. 古いバージョンを削除する2. サーバーのカーネルタイプを確認し、適切なバージョンをダウンロ...

MySQL マスタースレーブレプリケーションスレッドの状態遷移に関する詳細な理解

序文MySQL マスター スレーブ レプリケーションの基本原理は、スレーブ データベースがマスター ...

CentOS 7.6 への MySQL 5.7 GA バージョンのインストール チュートリアル図

目次環境の準備環境の準備mariadbをアンインストールする rpm -qa | grep mari...

ウェブページ内の 2 つのボックス モデル (W3C ボックス モデル、IE ボックス モデル)

Web ページ ボックス モデルには 2 種類あります。 1: 標準 W3C ボックス モデル。2:...

docker を使って sonarqube を構築する方法

目次1. Dockerをインストールする2. ソナーイメージをインストールする3. ソナーを使ってコ...

Docker+nextcloudで個人用クラウドストレージシステムを構築

1. Dockerのインストールと起動 yum で epel-release をインストールします ...