AGP-215, Save QR-code as image

react/src/components/dashboard/invoiceModal/invoiceModal.js

@@ -16,7 +16,7 @@ class InvoiceModal extends React.Component {
     this.state = {
       modalIsOpen: false,
       content: '',
-      qrAddress: '',
+      qrAddress: '-1',
       qrAmount: 0,
     };
     this.openModal = this.openModal.bind(this);
@@ -24,6 +24,7 @@ class InvoiceModal extends React.Component {
     this.updateInput = this.updateInput.bind(this);
     this.renderAddressList = this.renderAddressList.bind(this);
     this.updateQRContent = this.updateQRContent.bind(this);
+    this.saveAsImage = this.saveAsImage.bind(this);
   }
 
   openModal() {
@@ -32,11 +33,26 @@ class InvoiceModal extends React.Component {
     });
   }
 
+  saveAsImage(e) {
+    if (this.state.qrAddress !== '-1') {
+      const qrCanvas = document.getElementById("qrCanvas");
+      const canvas = qrCanvas.getElementsByTagName('canvas');
+      const dataURL = canvas[0].toDataURL();
+      const a = document.getElementById('saveImage');
+      const time = new Date().getTime();
+      a.href = dataURL;
+      a.download = this.state.qrAddress + '_' + time;
+    } else {
+      e.preventDefault();
+      return;
+    }
+  }
+  
   updateInput(e) {
     this.setState({
       [e.target.name]: e.target.value
     }, this.updateQRContent);
-   }
+  }
 
   updateQRContent() {
     this.setState({

react/src/components/dashboard/invoiceModal/invoiceModal.render.js

@@ -59,10 +59,22 @@ export const InvoiceModalRender = function () {
                           onChange={ this.updateInput } />
                       </form>
                     </div>
-                    <div className="col-lg-4">
+                    <div 
+                      id="qrCanvas" 
+                      className="col-lg-4 text-center">
                       <QRCode
                         value={ this.state.content }
                         size={ 198 } />
+                        <p className="margin-top-10">
+                          <a href=""
+                            id="saveImage"
+                            className="btn btn-success waves-effect waves-light save-image-btn margin-right-10"
+                            disabled={ this.state.qrAddress === '-1' }
+                            onClick={ this.saveAsImage }>
+                              <i className="icon fa-picture-o"></i>&nbsp;
+                              { translate('INDEX.SAVE_AS_IMAGE') }
+                          </a>
+                        </p>
                     </div>
                   </div>
                   <div className="row hide">

react/src/components/dashboard/qrModal/qrModal.js

@@ -20,6 +20,7 @@ class QRModal extends React.Component {
     this.closeModal = this.closeModal.bind(this);
     this.handleScan = this.handleScan.bind(this);
     this.handleError = this.handleError.bind(this);
+    this.saveAsImage = this.saveAsImage.bind(this);
   }
 
   handleScan(data) {
@@ -63,9 +64,20 @@ class QRModal extends React.Component {
       errorShown: this.state.error ? true : false,
     });
     
-    ReactDOM.unmountComponentAtNode(document.getElementById('webcam'));
+    if (this.props.mode === 'scan') {
+      ReactDOM.unmountComponentAtNode(document.getElementById('webcam'));
+    }
   }
 
+  saveAsImage(e) {
+      const qrCanvas = document.getElementById("qrModalCanvas" + this.props.content);
+      const canvas = qrCanvas.getElementsByTagName('canvas');
+      const dataURL = canvas[0].toDataURL();
+      const a = document.getElementById('saveModalImage' + this.props.content);
+      a.href = dataURL;
+      a.download = this.props.content;
+  }
+  
   render() {
     if (this.props.mode === 'scan') {
       return QRModalReaderRender.call(this);

react/src/components/dashboard/qrModal/qrModal.render.js

@@ -26,10 +26,21 @@ export const QRModalRender = function() {
             </div>
             <div className="modal-body">
               <div className="animsition vertical-align fade-in">
-                <div className="page-content vertical-align-middle">
+                <div 
+                  id={ 'qrModalCanvas' + this.props.content }
+                  className="page-content vertical-align-middle text-center">
                   <QRCode
                     value={ this.props.content }
                     size={ 198 } />
+                  <p className="margin-top-10">
+                    <a href=""
+                      id={ 'saveModalImage' + this.props.content }
+                      className="btn btn-success waves-effect waves-light save-image-btn margin-right-10"
+                      onClick={ this.saveAsImage }>
+                        <i className="icon fa-picture-o"></i>&nbsp;
+                        { translate('INDEX.SAVE_AS_IMAGE') }
+                    </a>
+                  </p>
                 </div>
               </div>
             </div>

react/src/components/dashboard/qrModal/qrModal.scss

@@ -8,4 +8,7 @@
   width: 100%;
   text-align: center;
   font-size: 16px;
+}
+.table a.save-image-button {
+  text-decoration: none;
 }

react/src/translate/en.js

@@ -311,6 +311,7 @@ export const _lang = {
       'CREATE_INVOICE_QR': 'Create Invoice QR Code',
       'QR_CONTENT': 'QR Content',
       'CHOOSE_RECEIVING_ADDRESS': 'Choose Address',
+      'SAVE_AS_IMAGE': 'Save as Image'
     },
     'ATOMIC': {
       'RAW_OUTPUT': 'Raw Output',