Merge pull request #1 from rishichawda/generate-image

feat(lib): generate .png for qrcode in base64 format

Author: rishichawda

lib/Canvas.js

@@ -10,6 +10,37 @@ var {
     Platform
 } = require('react-native');
 
+function getRenderHTML(context, render, generator) {
+    return `
+    <style>
+        *{margin:0;padding:0;}canvas{transform:translateZ(0);}
+    </style>
+    <canvas></canvas>
+    <script>
+        var canvas = document.querySelector('canvas');
+        (${render}).call(${context}, canvas);
+        (${generator}).call('', ${context} , canvas);
+    </script>"
+    `; 
+}
+
+function generateImage(context, canvas) {
+    if (window.postMessage.length !== 1) {
+        setTimeout(function() {
+        (generateImage).call(this, context, canvas);
+        }, 100);
+    } else {
+        const image = document.createElement('canvas');
+        const imageContext = image.getContext('2d');
+        image.width = context.size;
+        image.height = context.size;
+        imageContext.fillStyle = context.bgColor;
+        imageContext.fillRect(0, 0, context.size, context.size);
+        imageContext.drawImage(canvas, 0, 0);
+        window.postMessage(image.toDataURL());
+    }
+}
+
 var Canvas = createReactClass({
     propTypes: {
         style: PropTypes.object,
@@ -19,16 +50,23 @@ var Canvas = createReactClass({
         onLoadEnd: PropTypes.func,
     },
 
+    getImage: function(event) {
+        if(this.props.generateImage) {
+            this.props.generateImage(event.nativeEvent.data);
+        }
+    },
+
     render() {
         var contextString = JSON.stringify(this.props.context);
         var renderString = this.props.render.toString();
+        var generate = generateImage.toString();
         return (
             <View style={this.props.style}>
                 <WebView
                     automaticallyAdjustContentInsets={false}
                     scalesPageToFit={Platform.OS === 'android'}
                     contentInset={{top: 0, right: 0, bottom: 0, left: 0}}
-                    source={{html: "<style>*{margin:0;padding:0;}canvas{transform:translateZ(0);}</style><canvas></canvas><script>var canvas = document.querySelector('canvas');(" + renderString + ").call(" + contextString + ", canvas);</script>"}}
+                    source={{ html: getRenderHTML(contextString, renderString, generate) }}
                     opaque={false}
                     underlayColor={'transparent'}
                     style={this.props.style}
@@ -37,6 +75,7 @@ var Canvas = createReactClass({
                     onLoad={this.props.onLoad}
                     onLoadEnd={this.props.onLoadEnd}
                     originWhitelist={['*']}
+                    onMessage={this.getImage}
                 />
             </View>
         );

lib/QRCode.js

@@ -55,16 +55,18 @@ var QRCode = createReactClass({
         fgColor: PropTypes.string,
         onLoad: PropTypes.func,
         onLoadEnd: PropTypes.func,
+        getImageOnLoad: PropTypes.func,
     },
 
     getDefaultProps: function() {
         return {
-            value: 'https://github.com/cssivision',
+            value: 'https://github.com/rishichawda/react-native-qrcode',
             fgColor: 'white',
             bgColor: 'black',
             size: 128,
             onLoad: () => {},
             onLoadEnd: () => {},
+            getImageOnLoad: () => {},
         }
     },
 
@@ -101,6 +103,7 @@ var QRCode = createReactClass({
                         fgColor: this.props.fgColor,
                         cells: qr(value).modules,
                     }}
+                    generateImage={this.props.getImageOnLoad}
                     render={renderCanvas}
                     onLoad={this.props.onLoad}
                     onLoadEnd={this.props.onLoadEnd}