指定したpixelとppi時のmm(cm)を計算します。
処理画像や撮影した写真を指定解像度で利用した時のサイズ（mm/cm）を計算します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像サイズ計算</title>
<style>
body {
background: black;
color: white;
}
input {
width: 80px;
margin: 5px;
}
</style>
</head>
<body>
<center>
<h3>画像サイズ計算</h3>
<label>
幅／width (pixel):
<input id="widthPx" type="number" value="6000">
</label>
<br>
<label>
高さ／height (pixel):
<input id="heightPx" type="number" value="4000">
</label>
<br>
<label>
解像度／resolution (ppi):
<input id="dpi" type="number" value="350">
</label>
<br><br>
<button onclick="calc()">計算</button>
<div id="result"></div>
<script>
function calc() {
const widthPx =
Number(document.getElementById("widthPx").value);
const heightPx =
Number(document.getElementById("heightPx").value);
const dpi = Number(document.getElementById("dpi").value);
if (dpi <= 0) {
document.getElementById("result").textContent =
"DPIは0より大きい値を入力してください";
return;
}
const widthMm = widthPx / dpi * 25.4;
const heightMm = heightPx / dpi * 25.4;
document.getElementById("result").innerHTML = `
<p>幅／width: ${widthMm.toFixed(1)} mm
(${(widthMm/10).toFixed(1)} cm)<br>
高さ／height: ${heightMm.toFixed(1)} mm
(${(heightMm/10).toFixed(1)} cm)</p>
`;
}
</script>
</center>
</body>
</html>
実行直後の状態。必要事項を入力して［計算］をクリックするだけで・・・
結果が表示されます。
