我在 HTML5 画布上工作来计算图像上两点之间的距离。我想将以像素为单位的距离转换为厘米。我找到了一个公式：像素 * 2.54 / DPI。所以我想知道是否可以在JS中获取DPI图像属性？或者，我可以使用最简单的方法从像素计算厘米吗？
谢谢。
您所要求的，是检索物理显示尺寸cm任何数字化的事情，如果没有大量的启发式方法就无法完成，也就是说，作为网络开发人员，我们无法为所有访问者做到这一点。
这是衡量一英寸内可以容纳多少个点的指标。该装置通常用于打印机或扫描仪。然而显示器没有点，因此DPI没有任何意义。
图像等数字媒体可能会嵌入DPI其元数据中的信息，但这只是有关设置的提示scanner生成文件时使用，作者提示其预期大小printed。只有少数专用软件会使用此信息，而您的网络浏览器不属于其中。
这是可见信息的最小单位光栅图形 https://en.wikipedia.org/wiki/Raster_graphics。这些信息可以通过多种方式存储，但除了创建新的虚假数据外，不能通过其他方式分割。一般就是这样的“px“我们指的是1920x1080像素.
为了更容易理解，我们可以以位图为例，其中每个数字像素由文件中自己的一组位表示，为了再次变得更容易，让我们以 8 位位图图像（单色，通常为灰度）为例。这里使用 8 位来表示单个数字像素（色点）。例如，我们可以使用以下信息制作 2x2px 位图：
[2, 125, 255, 125, 255]
| | | | - pixel (2,2) 100% intensity
| | | - pixel (2,1) 50% intensity
| | - pixel (1,2) 100% intensity
| - pixel (1,1) 50% intensity
- width (nb of digital pixels per line)
/* height can be determined by the `length of data array / width` */
但请注意，所有光栅图像都不是位图，并且它们并不都具有此功能位像素关系，但它们确实都有数字像素的概念，就像它们所保存的最小颜色信息块一样。
澄清这两个概念后，我们可以解释你的公式的含义：
const pxTocm = (pixels, DPI) => pixels * 2.54 / DPI;
如果我们拍摄 150*150 像素的光栅图像，并使用分辨率为 300DPI 的相当好的喷墨打印机进行打印，则此公式将正确地给出 1.27 厘米或 0.5 英寸
但这只有在我们知道打印分辨率的情况下才有效.
好吧，那么我们就使用屏幕分辨率吧。
这是我们大多数显示器所需要的。与 DPI 非常相似，它衡量的是物理像素显示器确实包含在一英寸内。
What a 物理像素显示器的颜色因所使用的显示器类型而异，但例如在大多数 LCD 显示器中，一个物理像素由三个二极管组成，一个红色、一个绿色和一个蓝色，也称为子像素。
You can see all three sub-Pixels components composing a single pixel.
Image credits: CC-BY-SA 4.0 Krapteek88 for wikimedia.org
所以我们确实可以将你的公式重写为
const pxTocm(pixels, PPI) => pixels * 2.54 / PPI;
但这只有在图像以 100% 显示时才有效，即数字像素占用一个物理像素，这在网络上很少见，而且，我们需要知道这个 PPI 值.
从 Web API 中，我们有no way知道这一点PPI价值。我们甚至不能确定我们正在向监视器显示，它很可能是光束投影仪，其概念是PPI没有任何意义。
我们拥有的最接近的是屏幕分辨率（在Window.screen对象，但这只会给我们数量数字像素显示屏保持；我们仍然怀念该显示器的实际物理尺寸。
PPI = Math.hypot(screen.width, screen.height) / physical_size_of_diagonal
// and we don't have any way to find this diagonal...
但什么是window.devicePixelRatio我听说如果不是我的屏幕PPI?
为了解释这一点，我们首先需要解释什么是CSS px
px- 读作“像素”，但不是像素。A px是一个单位，由 W3C 调用 https://www.w3.org/Style/Examples/007/units.en.html “CSS的神奇单位”。它的值取决于支撑以及它与观看者眼睛的距离（！）。Here https://www.w3.org/TR/css-values-4/#reference-pixel你可以找到一个非常容易理解的解释来解释什么是参考像素对于CSS。
基本上，如果您在危险距离处通过显示器观看，以及在较近的距离处通过手机观看，它看起来应该具有相同的大小。
我希望您了解将其映射到现实生活中的测量有多么困难。
window.devicePixelRatio该值表示将用于显示的物理像素的数量CSS px.
This could很有用，因为有了这个值我们就可以精确映射一个 csspx到正在使用的物理像素的数量。
如果我们知道 CSS 是什么px真正代表（我们是在显示器、移动设备还是其他设备上？），以及我们用户显示器的当前 PPI 分辨率是多少（但我们没有），那么我们可以测量显示器上的显示尺寸。 （但我们不能）。
所以是的，我们可以在没有操作系统缩放的 96PPI 桌面显示器上获得 @JuMoGar 在他们的答案中提供的类型或公式（请注意，尽管他们弄错了）：
const CSSpxTocm = (CSSpx) => CSSpx * 2.54 / (96 / devicePixelRatio);
where 96是 96PPI 硬编码值 CSSpx单位使用 96 英寸。
但只要在手机上试一下，你就会发现它有多糟糕。作为小提琴，如果通过移动设备更容易的话。 https://jsfiddle.net/ycn321ef/embedded/result
const CSSpxTocm = (CSSpx) => CSSpx * 2.54 / (96 / devicePixelRatio);
console.log(CSSpxTocm(96) + 'cm');.test {
border-top: 3px solid blue;
height: 10px;
width: 96px;
}<div class="test px"></div>On my 125PPI laptop's monitor (13.3in 1280x1080px), it is already wrong, stating that it is 2.54cm, while it is in fact around 2.2cm, but on my Galaxy S6 phone, it returns 10.16cm https://i.stack.imgur.com/ZNFGu.jpg while IRL, it is roughly 1.7cm.
Why? Because the screen has ~577 PPI, but still, it uses only one physical pixel per CSS px. This means the devicePixelRatio is still 1, but the PPI being so far from expected 96, this formula returns absurdities. (The diagonal of an S6 screen is 5.1in, ~12.9cm)