public
Created

Retina images quality simulator

  • Download Gist
retina.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
/**
* Simulates how normal low-res images look on retina display
*
* It resamples all images (within <img> tags) to a lower resolution.
* We should use half the resolution of original image to be precise (because retina has 2x the density of pixels),
* but that doesn't show * perceived* effect. It's enough to scale by 1.75.
*
* Also, it would be good to resample also images used in CSS background, but I dunno how to do it :/
*
* Requires jQuery
*/
scale = 1.75
 
c = this.document.createElement("canvas")
ctx = c.getContext('2d')
 
$('img').each(function() {
var i = this;
 
c.width = i.width / scale
c.height = i.height / scale
 
ctx.drawImage(i, 0, 0, i.width, i.height, 0, 0, c.width, c.height)
i.src = c.toDataURL('image/png')
});

Error: The operation is insecure. [Break On This Error]

i.src = c.toDataURL('image/png')

// any ideas? FF 16.0.1

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.