From f308662370c2c88ad531f6aa72d7283f7e2ec294 Mon Sep 17 00:00:00 2001
From: Knut Ahlers <knut@ahlers.me>
Date: Mon, 22 Apr 2013 00:51:38 +0200
Subject: [PATCH] Added download link for canvas QRCode

---
 application.coffee | 3 +++
 application.js     | 3 +++
 index.html         | 1 +
 style.css          | 6 ++++++
 4 files changed, 13 insertions(+)

diff --git a/application.coffee b/application.coffee
index efbaec8..215c470 100644
--- a/application.coffee
+++ b/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()
diff --git a/application.js b/application.js
index 6cae806..c40779e 100644
--- a/application.js
+++ b/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();
   });
diff --git a/index.html b/index.html
index 84f24ae..ca9aee9 100644
--- a/index.html
+++ b/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>
diff --git a/style.css b/style.css
index bd58d48..ee3726d 100644
--- a/style.css
+++ b/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);