html - Prevent browser anti-aliasing when upscaling? -


with google's chart image api (which unfortunately deprecated april 2012), can generate qr codes.

qr code

i'm sure can change size of resulting image using api, i'd rather use css , width , height properties make little bigger.
in chrome @ least, results in nasty anti-aliasing (not preferable, since needs parsable machines). there way tell browsers not anti-alias upscaled images?

this guy has solution: http://nullsleep.tumblr.com/post/16417178705/how-to-disable-image-smoothing-in-modern-web-browsers

img {      image-rendering: optimizespeed;             /* fuck smoothing, give me speed  */     image-rendering: -moz-crisp-edges;          /* firefox                        */     image-rendering: -o-crisp-edges;            /* opera                          */     image-rendering: -webkit-optimize-contrast; /* chrome (and safari) */     image-rendering: optimize-contrast;         /* css3 proposed                  */     -ms-interpolation-mode: nearest-neighbor;   /* ie8+                           */   } 

sooo you:

imgqr {      width:100px;     height:100px;     image-rendering: optimizespeed;             /* fuck smoothing, give me speed  */     image-rendering: -moz-crisp-edges;          /* firefox                        */     image-rendering: -o-crisp-edges;            /* opera                          */     image-rendering: -webkit-optimize-contrast; /* chrome (and safari) */     image-rendering: optimize-contrast;         /* css3 proposed                  */     -ms-interpolation-mode: nearest-neighbor;   /* ie8+                           */   } 

Comments

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

c# - Copy ObservableCollection to another ObservableCollection -

All overlapping substrings matching a java regex -