Switch to img based code

2 files changed, 11 insertions, 6 deletions

diff --git a/base.scss b/base.scss
index 83a8bee..0eb3006 100644
--- a/base.scss
+++ b/base.scss
@@ -17,7 +17,13 @@ body {
         h1 {
             margin: 20px;
         }
+        p.save {
+            font-size: 0.7em;
+        }
         canvas#qr {
+            display: none;
+        }
+        img#qrimg {
             display: block;
             margin: 10px auto;
             padding: 20px;
diff --git a/index.js b/index.js
index 82d7973..306a819 100644
--- a/index.js
+++ b/index.js
@@ -20,16 +20,14 @@ class Qrgen extends React.Component {
       value: this.state.text,
       size: this.state.size
     })
+    this.refs.qrimg.src = this.qr.toDataURL()
   }
 
+
   componentDidUpdate (prevProps, prevState) {
     this.qr.value = this.state.text
     this.qr.size = this.state.size
-  }
-
-  saveImage () {
-    this.refs.dl.download = 'qrgen-test.png'
-    this.refs.dl.href = this.qr.toDataURL()
+    this.refs.qrimg.src = this.qr.toDataURL()
   }
 
   render () {
@@ -41,8 +39,9 @@ class Qrgen extends React.Component {
       <input type='text' value={this.state.size} onChange={(e) => {
         this.setState(Object.assign({}, this.state, { size: e.target.value }))
       }}></input>
-      <a href='' download='qrgen.png' ref='dl' onClick={(e) => { this.saveImage() }}>Save QR Code</a>
+      <p className='save'>To save the QR code, right-click the image and 'Save Image As', or touch and hold the image on your mobile browser.</p>
       <canvas ref='qr' id='qr'></canvas>
+      <img ref='qrimg' id='qrimg'></img>
       <footer>
           <p>Created by <a href="https://yuv.al">Yuval Adam</a>. Source available on <a href="https://github.com/yuvadm/qrgen.xyz">Github</a>.</p>
       </footer>