Skip to content

Instantly share code, notes, and snippets.

@juzna
Created October 12, 2012 22:47
Show Gist options
  • Save juzna/3882078 to your computer and use it in GitHub Desktop.
Save juzna/3882078 to your computer and use it in GitHub Desktop.
Retina images quality simulator
/**
* 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')
});
@srigi
Copy link

srigi commented Oct 13, 2012

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

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

// any ideas? FF 16.0.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment