javascript - 如何从JS中的图像获取DPI？

Question

我在HTML5画布上工作，以计算两点之间的图像距离。我想将此距离转换为厘米。我发现一个公式：像素* 2.54 / DPI。所以，我想知道是否有可能在JS中获得DPI图像属性？或者，我可以使用最简单的方法从像素计算厘米吗？

谢谢。

Answer 1

您可以使用JavaScript从图像中获取cms的大小。请注意，每台设备的DPI都不同，因此，我使用window.devicePixelRatio获取显示图像的屏幕的DPI（可以是笔记本，手机，平板电脑等）。

一种方法是：

/* Convert px to cm */
function getSizeInCM(sizeInPX) {
   return sizeInPX * 2.54 / (96 * window.devicePixelRatio)
};

/* get width and height of an image in cms */
var img = document.getElementById('IMAGE_ID'),
var width = getSizeInCM(img.clientWidth),
var height = getSizeInCM(img.clientHeight);

如果只想获取一张图像的像素，则更为简单：

var imageWidth = document.getElementById("IMAGE_ID").width;
var imageHeigth = document.getElementById("IMAGE_ID").height;

// or...

var imageWidth = document.getElementById("IMAGE_ID").clientWidth;
var imageHeigth = document.getElementById("IMAGE_ID").clientHeight;

这样做的另一种方法：您将需要一个额外的库： Blueimp's Load Image library并使用其 EXIF parsing extension

这是返回其坐标分辨率的代码：

loadImage.parseMetaData(FILE, function(meta) {
    if (!meta.exif) { return; }

    var resX = meta.exif.get('XResolution');
    var resY = meta.exif.get('YResolution');
});