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

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

実現可能性

解決策1: DOMをキャンバスに書き換え、キャンバスのtoBlobまたはtoDataURLメソッドを呼び出して、すぐにQiniu Cloudまたはサーバーにアップロードします。
解決策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 を導入することで効果的に解決できます。

まず、GitHub にアクセスして、hidpi-canvas.js ファイルをダウンロードします: Portal;
hidpi-canvas.js ファイルをプロジェクトにインポートします。
比率値を取得するには、getPixelRatio() 関数を呼び出します。
drawImage() では、幅と高さを比率で乗算します。
最終的なキャンバスはブログとしてエクスポートされ、ファイルオブジェクトに変換されて 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へのご支援をお待ちしております。

以下もご興味があるかもしれません: