大きな画面サイズの Web ページを画像ファイルに保存する
概略
ウインドサイズよりも大きな画面サイズの Web ページを画像ファイルで保存する方法について説明です。
PC の画面よりも大きなサイズの Web ページ (例: 5000x5000 画素など)も Web ブラウザに搭載されている開発ツールで png 画像にして保存できます。 開発ツール の デバイスエミュレーション にある画像キャプチャ機能を使います。
デバイスエミュレーションでキャプチャする
デバイスエミュレーションは、 スマホのような小さなディスプレイやデスクトップPC の大型ディスプレイなど 異なるサイズのディスプレイで Web がどのように見えているかを確認するためのツールです。
開発ツールのデバイスエミュレーションを表示する
下は Edge で開発ツールを開く例です。
もう 1度 デバイスエミュレーションを選択すると Web ブラウザが通常の表示に戻ります。 元の表示に戻す方法を知らないと混乱するので注意・・・。
ページ全体をキャプチャして保存する
フルサイズのスクリーンショットをキャプチャする
を実行すると
Web ページ全体の画像が png ファイルで保存されます。
スクリーンショットをキャプチャは Web ブラウザに表示されている範囲だけを画像保存します。
初期設定では縦横2倍に拡大された画素数で画像ファイルが保存されます。 等倍で保存したい場合は下のデバイスピクセル比の設定を行い、 ピクセル比を 1 にします。
デバイスピクセル比の設定
右端のメニューボタンを押すとメニューが開くので デバイスピクセル比の追加を実行すると メニューバーに DPR: 2.0 という表示が追加されます。
巨大なサイズの画像を保存する
