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 のクラッシュとサービスの起動失敗の解決策

推薦する

VMware インストール後に仮想ネットワーク カードが表示されない問題について

1 問題の説明: 1.1 Windows 10 に VMware を初めてインストールする場合、また...

MySQL 5.7.21 winx64 無料インストールバージョン設定方法グラフィックチュートリアル

MySQL 5.7.21 winx64無料インストールバージョンの設定方法、参考までに、具体的な内容...

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

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

CSSアニメーション属性キーフレームの詳細な説明

コラムを更新してからどれくらい経ったでしょうか?半年ですか?今年の後半は、まさに離陸、つまり文字通り...

フロントエンドフレームワーク Vue における親子コンポーネントデータの双方向バインディングの実装

目次1. 親コンポーネントと子コンポーネント間の一方向の値転送1. 親から子への値の受け渡し2. 子...

MySQL テーブル内の重複データを検索して削除する方法の概要

時々、データベース テーブルに重複したデータが大量に保存されます。これらの重複データはリソースを浪費...

CSS3 のテキストとフォントの新しい設定

テキストシャドウテキストシャドウ: 水平オフセット 垂直オフセット ぼかし色互換性: IE10+ &...

Linuxダイナミックリンクライブラリの使用

通常のプログラムと比較すると、ダイナミック リンク ライブラリにはメイン関数がなく、一連の関数の実装...

フォームファイル選択ボックスのスタイルをカスタマイズする例

コードをコピーコードは次のとおりです。 <!DOCTYPE html> <html...

MySQLデータベースにパスワードを入力した後にフラッシュバックする問題の解決策

パスワード入力後にMySQLデータベースがクラッシュする問題と解決策1 ケースの説明最近、基本的な機...

Vue でのカスタムディレクティブの基本的な使用方法

目次序文文章1. グローバル登録2. 部分登録3. フック機能とパラメータ設定4. 柔軟な使い方(1...

HTML でフォームを中央揃えにする

以前、写真が与えられ、その写真スタイルに基づいてフォームを作成するという課題に遭遇しました。しかし、...

ウェブデザインでよくある間違いのまとめ

Web ページを設計する過程で、デザイナーが間違いを犯すのは必然です。特に新人は、新しいアイデアを実...

Vuexの特性と機能の詳細な説明

目次Vuex とは何ですか? Vuexの5つの特性vuex の State 機能とは何ですか? vu...

MySQLインスタンスが起動できない問題の分析と解決

目次序文シナリオ分析要約する序文数日前、友人がWeChatで私に連絡してきて、マシンがダウンタイムか...