「ページのスクリーンショット」は、ページポスターの生成、ポップアップ画像の共有など、フロントエンドで頻繁に遭遇する要件です。ブラウザにはネイティブのスクリーンショット API がないため、ニーズを満たすにはキャンバスを使用して画像をエクスポートする必要があります。 実現可能性
ソリューションの選択解決策 1: 各 DOM 要素の計算スタイルを手動で計算し、キャンバス上の要素のサイズ、位置、その他の属性を計算する必要があります。 解決の難しさ 1
解決策 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つある
関数 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 を導入することで効果的に解決できます。
コアコードは以下のとおりです 関数 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へのご支援をお待ちしております。 以下もご興味があるかもしれません:
|
<<: VMware Workstation のインストール (Linux カーネル) Kylin グラフィック チュートリアル
>>: MySql のクラッシュとサービスの起動失敗の解決策
具体的なコードは次のとおりです。 パッケージ epoint.mppdb_01.h3c; java.i...
目次1. pidファイルの紹介2.ソケットファイルの紹介要約:ソケット ファイル: Unix ドメイ...
Dockerfile では、run、cmd、entrypoint はすべてコマンドを実行するために使...
目次1. イベントのリスニング2. イベントパラメータを渡す3. イベント修飾子ケース1: クリック...
述べる:この記事で扱うデータ量は 100 万です。数千万のデータが必要な場合は、量を増やすだけで済み...
この記事では、バウンドボールゲームを実装するためのjQueryの具体的なコードを参考までに共有します...
目次Vue が DOM を非同期更新する原理1 実際の DOM 要素を取得できるのはいつですか? 2...
目次概要方法1: params経由でパラメータを渡す方法2: クエリを通じてパラメータを渡す方法3:...
目次1. 古いバージョンを削除する2. サーバーのカーネルタイプを確認し、適切なバージョンをダウンロ...
序文MySQL マスター スレーブ レプリケーションの基本原理は、スレーブ データベースがマスター ...
目次環境の準備環境の準備mariadbをアンインストールする rpm -qa | grep mari...
Web ページ ボックス モデルには 2 種類あります。 1: 標準 W3C ボックス モデル。2:...
目次1. Dockerをインストールする2. ソナーイメージをインストールする3. ソナーを使ってコ...
1. Dockerのインストールと起動 yum で epel-release をインストールします ...