diff --git a/react/src/components/dashboard/invoiceModal/invoiceModal.js b/react/src/components/dashboard/invoiceModal/invoiceModal.js
index 73602abb1..7ff0e4a11 100755
--- a/react/src/components/dashboard/invoiceModal/invoiceModal.js
+++ b/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({
diff --git a/react/src/components/dashboard/invoiceModal/invoiceModal.render.js b/react/src/components/dashboard/invoiceModal/invoiceModal.render.js
index 25b59b9a5..b7a21a898 100644
--- a/react/src/components/dashboard/invoiceModal/invoiceModal.render.js
+++ b/react/src/components/dashboard/invoiceModal/invoiceModal.render.js
@@ -59,10 +59,22 @@ export const InvoiceModalRender = function () {
onChange={ this.updateInput } />
-
diff --git a/react/src/components/dashboard/qrModal/qrModal.js b/react/src/components/dashboard/qrModal/qrModal.js
index e152ba963..776d872ac 100755
--- a/react/src/components/dashboard/qrModal/qrModal.js
+++ b/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);
diff --git a/react/src/components/dashboard/qrModal/qrModal.render.js b/react/src/components/dashboard/qrModal/qrModal.render.js
index b08bdbfb0..a96f886e8 100644
--- a/react/src/components/dashboard/qrModal/qrModal.render.js
+++ b/react/src/components/dashboard/qrModal/qrModal.render.js
@@ -26,10 +26,21 @@ export const QRModalRender = function() {
diff --git a/react/src/components/dashboard/qrModal/qrModal.scss b/react/src/components/dashboard/qrModal/qrModal.scss
index 7eef696ec..6c05b5600 100644
--- a/react/src/components/dashboard/qrModal/qrModal.scss
+++ b/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;
}
\ No newline at end of file
diff --git a/react/src/translate/en.js b/react/src/translate/en.js
index a3c9d5097..0ecc6c804 100644
--- a/react/src/translate/en.js
+++ b/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',