【JavaScript】 ブラウザのDPIを計測する

ブラウザのDPIを取得してみようと思う。

まずは、div要素を定義する。

<div id="inch"></div>

次に、div要素のwidthとheightを 1in にする。
1inは、1インチの意味。

paddingやborderは、0にする。
念のため box-sizing はborder-boxにする。

#inch{
    width: 1in;
    height: 1in;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

この状態で、div要素のoffsetHeightを参照する。

DOMContentLoadedイベントでDOMが構築されるのを待つことを忘れないようにしましょう。

window.addEventListener( "DOMContentLoaded" , ()=>{
    // dpi取得
    const dpi = document.getElementById("inch").offsetHeight;
});

DPIは、1インチのドット数。
DPMを調べてみると、1ミリのドット数のようだ。

1インチは25.4ミリメートルなので、DPMはDPIを25.4 で割ると求められる

96dpi は、

96 ÷25.4 = 3.779527559055118 dpm

となる。

ちなみにBMPファイルの解像度はメートル単位であらわされる。
この場合dpiを、0.0254で割る。

96dpi なら、

96 ÷0.0254 = 3,779.527559055118

となる。

モニタの解像度はFHDやQHDなどでも表されます。
モニタの大きさが違っていても同じ解像度ならピクセルの数は同じです。

だったら、画面が大きい方がDPIは小さいはずですね。

例えば幅10インチと5インチのモニタがあって共に500ピクセルだったら、最初のモニタは 50dpi、2番目は 100dpi ですね。
ブラウザはモニタの大きさを把握して、計算をしているのでしょうか。

そんなことは、やっていないようです。

DPIは印刷した時のイメージを表しています。
DPIのDは、ドットを意味します。
昔のプリンターはドットプリンターが主流で、ドドドドドと、点を打ち付けて文字を印字していました。
ドドドドドの一つ一つがドットですね。

なので、モニタは関係ないのでした。

解像度にはPPIという単位があります。
こちらは ピクセル・パー・インチ　で、1インチのピクセル数を表しています。
そのため、同じ解像度でもモニタの大きさが変わったらPPIも変わります。

しかし計算にはモニタの実寸が必要です。
これはブラウザで取得できない、そもそもコンピューターが把握していないので、PPIを計算できません。

現状では、DDPとＰＰＩは同じものとして扱われていることが多いので、あまり気にすることではないようです。

CanvasのtoBlob()とtoDataURL()メソッドは、画像データをPNGやJPEGに変換します。

このとき、HTML Standardの記述を読むと、96dpiとして処理しているようです。

The image file's pixel data must be the bitmap's pixel data scaled to one image pixel per coordinate space unit, and if the file format used supports encoding resolution metadata, the resolution must be given as 96dpi

出典：4.12.5.5 Serializing bitmaps to a file

翻訳すると、次のような感じです。

『画像ファイルのピクセル データは、座標空間単位ごとに 1 つの画像ピクセルにスケーリングされたビットマップのピクセル データである必要があり、使用されるファイル形式が解像度メタデータのエンコードをサポートしている場合、解像度は 96dpi として指定する必要があります。』

変換後の画像データに解像度の情報が含まれているなら、96dpiにしましょう。という意味ですね。