image scale

by Nick Hulea

HTML

<h2>Original, scaled x2 by browser</h2>
<img src="http://upload.wikimedia.org/wikipedia/commons/9/95/The_Gunk.png" width="466" height="270">

<h2>scaled x2 via Canvas blitting</h2>
<canvas id="canvas" />

JavaScript

var img = new Image();

// original image at
// http://upload.wikimedia.org/wikipedia/commons/9/95/The_Gunk.png
// encoded via http://www.scalora.org/projects/uriencoder/
img.src = 'data:image/png;base64,' + 'iVBORw0KGgoAAAANSUhEUgAAAOkAAACHCAMAAADEF477AAAAP1BMVEX////////49ND05Ozw0NDo5Ljc' + 'rLjU1MTIxJjIjKS0sIy0bJCsqHigYICMUHCAfFSAfEhgYEBgOExYUBAoJAD+/qRoAAAAAXRSTlMAQObY' + 'ZgAADPpJREFUaN7tm4tW4zgMhtmlYzCqDdXu+z/rxtbVl6TtNGeZ9ODMUhZC6y+/LMuy/PLy037aT/tp' + 'P21p6NpzMwLEGOoF8IysjtG3+GSsTCkt2FVYn4lTKEnGcnlofDJOtdeKCXw9DypzVsbT0gpqQaT2PKjE' + 'qZgMGgVUUQ9PqpwL46txLtNLpgknQ3XHRxe1CloxX5dWOUNVEDRkKKzVA+PRBS2cr8TJglZQf1euP8t4' + 'dNCOcwAt99VoCZ8B1HmiOIAud5ZxelzSFjQY6Oh7MByZtAFlTpiDLpqejktaglwPKkHR0iakYSE9qEei' + 'NUudXApotOhvVdMjg4YJ6Iqmr+GYxoupjsgiKYMCBboVdUJ6Oh3UeLGaKUnqQWmBOk4y8BqPKmkU41VQ' + 'jeZhFBVfTwcfpSWkd6CJNY1DiHRoUCb1S9EEsvbuSA/rdxOP0hoC2lI0JXFJragI8bAxQ6S59HTyozQt' + 'TfMpHvWwKV8GDQOomC+p/AR5I5yC+lwKTTnHz6Yk9kanYKDRXxwvPUneSATt8ew6vKgqKU8vPgkI0UMf' + 'HZVXpQxaML8+pH0p7DOMVFTQOkgXzDdrFZa3KI6OilBzgbTxIpx/8cWsMUo4gceWNLLtFlCHKbAfH4aK' + 'hzfewJZLeNKeChUp3q3Z2x6UYRvUA5OW4UkhA4H2rUE9sKZlMmXjhSno06CS8VbH+zUHragfb9UDH9l8' + 'zXgXSVdB3woqHHukFs/Lo3QFVM33i8z3sMmG1VH60ZuvjNSj5o+40Gg03i+vatH02OZrYcPXW6fpv89l' + 'vqjx0ddbpyl2mhbve1xNeau/TDK9ph/4MWgKf4Kmv1em6WLeXtMv/FrT9BtFtfo+gLtgkWsAJ5p60k7T' + 'byNF1KR0XXzdXpNqoWAgTR3qP/jPqCkvyPGbODkjLVUYd2zKI7CmcdTUk/J8Stb7TZkH4hRGAr0d1Tkk' + 'mk/nmko4WGcZ+B7zJU4BtOu2vlTjFU3jR2u+Nk4FlCMH2M98b3ejKJxNPXVFvYkUVNMoocPbQKqgH6AZ' + 'YNyHMvM2dL4Gu4C+9pgCe0tnELymbL5v3XxqoGa8D6NWSt/hAnsN1OqptXA83FY8XjPaDvXrrUFFl0cq' + 'oM5442Pmu0wWWk9L4267iktB43CFEK+LyiUcUcrOA1CeV3KC/761oDTH8H7qA6JWToM8aUn42nu2oLJJ' + 'b7jXSVvQWPNIDvWL870ONFg1y++iMqeV6zmTnL8nRqpIqAbFHoy6HrnreDXc8EcJKseCavn7D3010BC1' + 'ZPv3UIXz1JQlxi1UDAJqfqtFxaumq25XKltbVMZsQONG4c7Ns6KvvpR9LhpzMK3a4xwt9jGPdB2vWm6w' + 'zbVYa+YYtbs+bL/CleHHeP9JqALqOKXYHVHzdjj5k9cTFYwPaxNBxeuxUXT9XkHlDTcdo+B2VyHh/aDG' + '6SfRyjqLeEjSaXkxm+8WKYHKoGNUGqo1kd+2whlsJtUr3IvKoMo5xuBjGECSTkBlTyFukdIKxjlSRWXW' +...