Search code examples
javascripthtmlcssimage

Prevent Image Scaling on HighDPI Displays

As part of a project of mine, I want to write an image-viewer inside a webbrowser.

The images are extracted from video files on the server and sent to the client. The image should be displayed as is and not be scaled (unless the user explicitely chose to do so) by the browser, as this would distort the image.

Image showing the Problem. This image illustrates the problem. The Win32-Application (with disabled DPI-Scaling) Shows a 20x20 image without any scaling (the black area). Chrome shows the 20x20 image (here a green image) scaled by a factor of two. What I want is that the image on the browser has the same area as the black square inside the Win32-Application, regardless of which DPI-Setting the user has chosen on his system.

To be clear: Serving the user an image with higher resolution is not an option. Neither is having the browser scale the image with different Settings acceptable. JavaScript-based solutions however may work as well.

I have not yet been able to find a solution to that problem.

Solution

  • I haven't found a way to disable it, but I found something to basically reverse the scaling. (source)

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

    I do not know how accurate this scaling will be and whether the image will still be rendered pixel-perfect. However, assuming the browser does some rounding internally before rendering, it should.