Added download link for canvas QRCode

application.coffee

@@ -5,6 +5,9 @@ $ ->
     text = window.location.hash.substring 1
     $('textarea').val text
     generateQRCode()
+  $('a', '#download').bind 'click', ->
+    window.location.href = $('canvas', '#qrarea')[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')
+
   if window.location.hash
     $(window).trigger 'hashchange'
   generateQRCode()

application.js

@@ -10,6 +10,9 @@
       $('textarea').val(text);
       return generateQRCode();
     });
+    $('a', '#download').bind('click', function() {
+      return window.location.href = $('canvas', '#qrarea')[0].toDataURL('image/png').replace('image/png', 'image/octet-stream');
+    });
     if (window.location.hash) $(window).trigger('hashchange');
     return generateQRCode();
   });

index.html

@@ -24,6 +24,7 @@
         <p><input type="submit" value="Get my QRCode!" id="triggerCreate" /></p>
       </div>
       <div id="qrarea"></div>
+      <div id="download"><a href="javascript:void(0);">(Download QRCode as PNG)</a></div>
       <div id="footer">Quickly put together by <a href="http://blog.knut.me/">Knut Ahlers</a> using <a href="http://jeromeetienne.github.io/jquery-qrcode/">jquery-qrcode</a></div>
       <a href="https://github.com/Luzifer/qrdisplay"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_white_ffffff.png" alt="Fork me on GitHub"></a>
     </div>

style.css

@@ -58,6 +58,12 @@ input {
   width: 256px;
 }
 
+#download {
+  font-size: 0.9em;
+  text-align: center;
+  margin: 0.5em;
+}
+
 #footer {
   border-top: 1px dotted #eee;
   color: rgba(204, 204, 204, 0.8);