Create a gist now

Instantly share code, notes, and snippets.

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')

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