阻止HighDPI显示器上的图像缩放

Question

作为我的项目的一部分，我想在web浏览器中编写一个图像查看器。

从服务器上的视频文件中提取图像并将其发送到客户端。图像应该按显示，并且不会被浏览器缩放（除非用户明确选择这样做），因为这会使图像失真。

此图像说明了问题。 Win32应用程序（禁用DPI-Scaling）显示没有任何缩放的20x20图像（黑色区域）。 Chrome将20x20图像（此处为绿色图像）缩放两倍。我想要的是浏览器上的图像与Win32-Application中的黑色方块具有相同的区域，无论用户在他的系统上选择了哪种DPI设置。

要明确：为用户提供分辨率较高的图像不是一个选项。也没有让浏览器缩放具有不同设置的图像。但是，基于JavaScript的解决方案也可以正常运行。

我还没有找到解决这个问题的方法。

Answer 1

我还没有找到一种方法来禁用它，但我找到了一些基本上可以逆转缩放的东西。 （source）

var factor = 1/window.devicePixelRatio; 
document.querySelector('img').style.transform = 'scale(' + factor + ')';

我不知道这种缩放的准确程度，以及图像是否仍然可以像素完美呈现。但是，假设浏览器在渲染之前在内部进行了一些舍入，它应该是。