「ページのスクリーンショット」は、ページポスターの生成、ポップアップ画像の共有など、フロントエンドで頻繁に遭遇する要件です。ブラウザにはネイティブのスクリーンショット 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 のクラッシュとサービスの起動失敗の解決策
1 問題の説明: 1.1 Windows 10 に VMware を初めてインストールする場合、また...
MySQL 5.7.21 winx64無料インストールバージョンの設定方法、参考までに、具体的な内容...
SSHPASSをインストールする最新のオペレーティング システムでは、sshpass パッケージはデ...
コラムを更新してからどれくらい経ったでしょうか?半年ですか?今年の後半は、まさに離陸、つまり文字通り...
目次1. 親コンポーネントと子コンポーネント間の一方向の値転送1. 親から子への値の受け渡し2. 子...
時々、データベース テーブルに重複したデータが大量に保存されます。これらの重複データはリソースを浪費...
テキストシャドウテキストシャドウ: 水平オフセット 垂直オフセット ぼかし色互換性: IE10+ &...
通常のプログラムと比較すると、ダイナミック リンク ライブラリにはメイン関数がなく、一連の関数の実装...
コードをコピーコードは次のとおりです。 <!DOCTYPE html> <html...
パスワード入力後にMySQLデータベースがクラッシュする問題と解決策1 ケースの説明最近、基本的な機...
目次序文文章1. グローバル登録2. 部分登録3. フック機能とパラメータ設定4. 柔軟な使い方(1...
以前、写真が与えられ、その写真スタイルに基づいてフォームを作成するという課題に遭遇しました。しかし、...
Web ページを設計する過程で、デザイナーが間違いを犯すのは必然です。特に新人は、新しいアイデアを実...
目次Vuex とは何ですか? Vuexの5つの特性vuex の State 機能とは何ですか? vu...
目次序文シナリオ分析要約する序文数日前、友人がWeChatで私に連絡してきて、マシンがダウンタイムか...