你不需要任何这类的 dpi。
因为你有一个固定且已知大小和位置的盒子（在这种情况下是 T 恤）。
当用户将元素移动到盒子内时，你可以计算元素相对于盒子的位置和大小。
你所需要做的就是像这样：
scale = box.width_in_inches / box.width_in_pixels
el.x_in_inches = (el.x_in_pixels - box.x_in_pixels)*scale
el.y_in_inches = (el.y_in_pixels - box.y_in_pixels)*scale
el.width_in_inches = (el.width_in_pixels )*scale
el.height_in_inches = (el.height_in_pixels )*scale
box.width_in_inches用户选择不同尺码的T恤时会改变。
box.width_in_pixels当用户缩放页面时会改变。
但所有*_in_pixels值都会相应地改变。
更新：
回应您的评论：
也许你的代码中得到了错误的测量结果，因为它们从一开始就是错误的：T恤宽度和高度的比例。
以英寸为单位：22/30.5 = 0.72...
以图片像素为单位：452/548 = 0.8248...（或者在我的浏览器页面上：1428.750/1732.190 = 0.8248...）
使用您设置的边界像素：(1428.750-160)/(1732.190-100) = 0.777...
所以我必须想办法解决它。我选择删除边界，这样徽标可以在T恤图片内自由移动和拉伸。并且决定T恤宽度应该是25.157...英寸，而不是22英寸。
然后，只是作为声音检查，我将徽标宽度设置为最大值，并将其移到顶部。现在是实验的时候了。预期结果应该与{ x:0, y:0, w: 25.157, h: 9.07 }相当接近。
使用以下函数：
// const shirt_w_in_inches = 30.5*(452/548)
const shirt_h_in_inches = 30.5
function get_measurements() {
const pixels_shirt = shirt.getBoundingClientRect()
const pixels_logo = logo .getBoundingClientRect()
const scale = shirt_h_in_inches / pixels_shirt.height
const inches = {
x: (pixels_logo.x - pixels_shirt.x)*scale,
y: (pixels_logo.y - pixels_shirt.y)*scale,
w: (pixels_logo.width )*scale,
h: (pixels_logo.height )*scale,
}
console.log("pixels_shirt", pixels_shirt)
console.log("pixels_logo" , pixels_logo)
console.log("inches" , inches)
return inches
}
我认为它们相当合理。
我能找到的最坏情况是，当我设置500%缩放并刷新页面，然后将浏览器调整为初始窗口大小的25%（我无法将其设置得更小）时，最大误差约为T恤宽度的1%。在这种情况下，我得到以下测量结果：{x: 0.153..., y: 0.172..., w: 24.920..., h: 8.948...}
但是，如果我添加英寸宽度和英寸x，我将得到25.073-这给出了0.3％-这是我观察到的平均误差。
所以你可以问：“x和y怎么样？它们从来不是0！”很抱歉打破你的幻想，但看起来像是你正在使用的Moveable的问题。如果我使用此函数：
function set_full_size() {
const pixels_shirt = shirt.getBoundingClientRect()
const pixels_logo = shirt.getBoundingClientRect()
logo.style.left = shirt.clientLeft + 'px'
logo.style.top = shirt.clientTop + 'px'
logo.style.width = shirt.clientWidth + 'px'
logo.style.height = shirt.clientHeight*pixels_logo.height/pixels_logo.clientWidth + 'px'
}
它不仅将x和y设置为零，而且宽度的误差更小。这可能是因为Moveable在徽标周围放置控件的原因。
30.5英寸高 x 22英寸宽。 - ctf0