add img (logo) and download api

README.md

@@ -31,6 +31,18 @@ prop      | type                 | default value
 `fgColor` | `string` (CSS color) | `"#000000"`
 `level`   | `string` (`'L' 'M' 'Q' 'H'`)            | `'L'`
 `includeMargin` | `boolean`      | `false`
+`ref`     | `function` [react's ref](https://reactjs.org/docs/refs-and-the-dom.html) |
+`img`     | see below            | see below
+
+### `img` Props
+
+prop      | type                  | default value
+----------|-----------------------|--------------
+`src`     | `string`              |
+`top`     | `number` (percentage) | `50`
+`left`    | `number` (percentage) | `50`
+`width`   | `number` (percentage) | `10`
+`height`  | `number` (percentage) | `10`
 
 ## Custom Styles
 
@@ -40,5 +52,18 @@ prop      | type                 | default value
 
 <img src="qrcode.png" height="256" width="256">
 
+## Download (or Export) as File
+
+You need to set `ref={ref => this.qrcode = ref}` to get the component reference first, then call:
+
+```javascript
+this.qrcode.download('QR Code.png');
+```
+
+related methods:
+
+* `genCanvas(overwritingProps): Promise<HTMLCanvasElement>`
+* `genCanvasDataURL(type, overwritingProps): Promise<string>`
+* `download(filename, type, overwritingProps)`
 
 ## LICENSE [ISC](LICENSE)

examples/demo.js

@@ -3,8 +3,8 @@
 var QRCode = require('..');
 var React = require('react');
 var ReactDOM = require('react-dom');
+var qrCodeDownloadCode = `this.qrcode.download('QR Code.png');`;
 
-// TODO: live update demo
 class Demo extends React.Component {
   state = {
     value: 'http://picturesofpeoplescanningqrcodes.tumblr.com/',
@@ -14,9 +14,28 @@ class Demo extends React.Component {
     level: 'L',
     renderAs: 'svg',
     includeMargin: false,
+    withImg: false,
+    img: {
+      src: './logo.png',
+      top: 50,
+      left: 50,
+      width: 10,
+      height: 10,
+    },
   };
 
+  downloadQRCode = () => {
+    this.qrcode.download('QR Code.png');
+  };
+
+  setImgState(state) {
+    this.setState({img: {...this.state.img, ...state}});
+  }
+
   render() {
+    var imgCode = this.state.withImg
+      ? `  img={${JSON.stringify(this.state.img)}}\n`
+      : '';
     var code = `<QRCode
   value={"${this.state.value}"}
   size={${this.state.size}}
@@ -25,7 +44,8 @@ class Demo extends React.Component {
   level={"${this.state.level}"}
   includeMargin={${this.state.includeMargin}}
   renderAs={"${this.state.renderAs}"}
-/>`;
+  ref={ref => this.qrcode = ref}
+${imgCode}/>`;
     return (
       <div>
         <div>
@@ -100,6 +120,80 @@ class Demo extends React.Component {
             </select>
           </label>
         </div>
+        <div>
+          <label>
+            With Img:
+            <br />
+            <input
+              type="checkbox"
+              checked={this.state.withImg}
+              onChange={(e) => this.setState({withImg: e.target.checked})}
+            />
+          </label>
+        </div>
+        <div style={this.state.withImg ? {} : {display: 'none'}}>
+          <div>
+            <label>
+              Img src:
+              <br />
+              <input
+                onChange={(e) => this.setImgState({src: e.target.value})}
+                value={this.state.img.src}
+              />
+            </label>
+          </div>
+          <div>
+            <label>Img Coordinate:</label>
+            <br />
+            <div style={{marginLeft: '20px'}}>
+              <label>
+                top (percent):
+                <input
+                  type="number"
+                  onChange={(e) =>
+                    this.setImgState({top: parseInt(e.target.value, 10) || 50})
+                  }
+                  value={this.state.img.top}
+                />
+              </label>
+              <label>
+                , left (percent):
+                <input
+                  type="number"
+                  onChange={(e) =>
+                    this.setImgState({left: parseInt(e.target.value, 10) || 50})
+                  }
+                  value={this.state.img.left}
+                />
+              </label>
+              <br />
+              <label>
+                width (percent):
+                <input
+                  type="number"
+                  onChange={(e) =>
+                    this.setImgState({
+                      width: parseInt(e.target.value, 10) || 10,
+                    })
+                  }
+                  value={this.state.img.width}
+                />
+              </label>
+              <label>
+                height (percent):
+                <input
+                  type="number"
+                  onChange={(e) =>
+                    this.setImgState({
+                      height: parseInt(e.target.value, 10) || 10,
+                    })
+                  }
+                  value={this.state.img.height}
+                />
+              </label>
+            </div>
+          </div>
+        </div>
         <div>
           <label>
             Value:
@@ -117,7 +211,7 @@ class Demo extends React.Component {
           <label>
             Use it:
             <br />
-            <textarea rows="6" cols="80" disabled={true} value={code} />
+            <textarea rows="11" cols="80" disabled={true} value={code} />
           </label>
         </div>
 
@@ -129,7 +223,14 @@ class Demo extends React.Component {
           level={this.state.level}
           renderAs={this.state.renderAs}
           includeMargin={this.state.includeMargin}
+          {...(this.state.withImg ? {img: this.state.img} : {})}
+          ref={(ref) => (this.qrcode = ref)}
         />
+
+        <br />
+        <button onClick={this.downloadQRCode} style={{fontFamily: 'monospace'}}>
+          {qrCodeDownloadCode}
+        </button>
       </div>
     );
   }