search

ctrl-freaks / freezeframe.js

freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or with trigger / release functions.
http://ctrl-freaks.github.io/freezeframe.js/
MIT License
1.41k stars 110 forks source link

Static image is blurry on high device pixel ratio screens. #158

Open KyleSmith0905 opened 5 months ago

KyleSmith0905 commented 5 months ago

On my computer the device pixel ratio is 1.25. I have a like button that animates on click. The stationary image is a bit blurry as it's trying to render a downscaled 24x24 image in a 32x32 grid of pixels.

This may be a helpful resource: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#correcting_resolution_in_a_canvas

I'm currently working on a fix for it.

davelavoie commented 3 months ago

Thanks! I was exactly looking for a solution like this!

For those who include the compiled JavaScript file, you can also do the following:

In freezeframe.min.js, search for clientWidth in the minified file, and replace it with naturalWidth. Then, look for clientHeight, and replace it with naturalHeight. Voilà!

Obviously you'll need to host your own version of the file afterwards, since I'm not sure the library is going to be updated in the near future. But at least, it works!