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

Question

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

从服务器上的视频文件中提取图像并发送给客户端。图像应该按原样显示，而不是由浏览器缩放(除非用户明确选择这样做)，因为这会扭曲图像。

​

这张图片说明了这个问题。Win32-Application (禁用DPI- scaling )显示一个20x20图像，没有任何缩放(黑区)。Chrome显示20x20图像(这里是绿色图像)，缩放倍数为2。我想要的是浏览器上的图像与Win32-Application中的黑色方框具有相同的区域，不管用户在系统上选择了什么DPI设置。

需要明确的是:为用户提供高分辨率的图像不是选项。也不允许浏览器缩放具有不同设置的图像。然而，基于JavaScript的解决方案也可能有效。

我尚未找到解决这一问题的办法。

Answer 1

我还没有找到一种方法来禁用它，但我找到了一些东西，基本上逆转了缩放。(来源)

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

我不知道这个缩放有多精确，图像是否仍然是像素完美的。但是，假设浏览器在呈现之前在内部执行一些舍入操作，则应该这样做。