From 933ed2e8a6af2f4e586cd7f608a0a185472af1ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Nicin=CC=81ski?= <daniel.nicinski@seamless.se>
Date: Thu, 2 Apr 2015 00:56:15 +0200
Subject: [PATCH] marking qr code as downloadable image

---
 README.md         |  6 ++++++
 src/angular-qr.js | 33 ++++++++++++++++++++++++---------
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 9b9e540..4b1f44b 100644
--- a/README.md
+++ b/README.md
@@ -83,6 +83,12 @@ Size in pixels
 #### image
 - If you want to render qr code into image element set this attribute to `true`.
 
+#### download
+- Mark an image as downloadable
+
+#### fileName
+- Name of downloaded image
+
 # Contributing
 
 Contributions are welcome. Please make a pull request against canary branch, use [Git Commit Message Conventions](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#heading=h.uyo6cb12dt6w) and do not bump versions. Also include tests.
diff --git a/src/angular-qr.js b/src/angular-qr.js
index f333687..166df5c 100644
--- a/src/angular-qr.js
+++ b/src/angular-qr.js
@@ -72,6 +72,10 @@
 
       return $scope.checkInputMode(inputMode, text) ? inputMode : '';
     };
+
+    $scope.getFileName = function() {
+        return $scope.fileName || 'qrcode.png';
+    };
   }])
   .directive('qr', ['$timeout', '$window', function($timeout, $window){
 
@@ -84,7 +88,8 @@
         inputMode: '=',
         size: '=',
         text: '=',
-        image: '='
+        image: '=',
+        fileName: '='
       },
       controller: 'QrCtrl',
       link: function postlink(scope, element, attrs){
@@ -93,15 +98,19 @@
           throw new Error('The `text` attribute is required.');
         }
 
-        var canvas = element.find('canvas')[0];
+        var $canvas = element.find('canvas');
+        var canvas = $canvas[0];
         var canvas2D = !!$window.CanvasRenderingContext2D;
 
+        var link = 'download' in attrs ? document.createElement('a') : '';
+
         scope.TYPE_NUMBER = scope.getTypeNumeber();
         scope.TEXT = scope.getText();
         scope.CORRECTION = scope.getCorrection();
         scope.SIZE = scope.getSize();
         scope.INPUT_MODE = scope.getInputMode(scope.TEXT);
         scope.canvasImage = '';
+        scope.FILE_NAME = scope.getFileName();
 
         var draw = function(context, qr, modules, tile){
           for (var row = 0; row < modules; row++) {
@@ -114,7 +123,7 @@
           }
         };
 
-        var render = function(canvas, value, typeNumber, correction, size, inputMode){
+        var render = function(canvas, value, typeNumber, correction, size, inputMode, fileName){
           var trim = /^\s+|\s+$/g;
           var text = value.replace(trim, '');
 
@@ -132,44 +141,50 @@
             draw(context, qr, modules, tile);
             scope.canvasImage = canvas.toDataURL() || '';
           }
+
+          if (link) {
+              link.download = fileName;
+              link.href = canvas.toDataURL() || '';
+              element.wrap(link);
+          }
         };
 
-        render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE);
+        render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE, scope.FILE_NAME);
 
         $timeout(function(){
           scope.$watch('text', function(value, old){
             if (value !== old) {
               scope.TEXT = scope.getText();
               scope.INPUT_MODE = scope.getInputMode(scope.TEXT);
-              render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE);
+              render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE, scope.FILE_NAME);
             }
           });
 
           scope.$watch('correctionLevel', function(value, old){
             if (value !== old) {
               scope.CORRECTION = scope.getCorrection();
-              render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE);
+              render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE, scope.FILE_NAME);
             }
           });
 
           scope.$watch('typeNumber', function(value, old){
             if (value !== old) {
               scope.TYPE_NUMBER = scope.getTypeNumeber();
-              render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE);
+              render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE, scope.FILE_NAME);
             }
           });
 
           scope.$watch('size', function(value, old){
             if (value !== old) {
               scope.SIZE = scope.getSize();
-              render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE);
+              render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE, scope.FILE_NAME);
             }
           });
 
           scope.$watch('inputMode', function(value, old){
             if (value !== old) {
               scope.INPUT_MODE = scope.getInputMode(scope.TEXT);
-              render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE);
+              render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE, scope.FILE_NAME);
             }
           });
         });