feat: convert component to an image

package-lock.json

@@ -2955,6 +2955,11 @@
         }
       }
     },
+    "base64-arraybuffer": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
+      "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ=="
+    },
     "base64-js": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz",
@@ -3356,6 +3361,103 @@
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001111.tgz",
       "integrity": "sha512-xnDje2wchd/8mlJu8sXvWxOGvMgv+uT3iZ3bkIAynKOzToCssWCmkz/ZIkQBs/2pUB4uwnJKVORWQ31UkbVjOg=="
     },
+    "canvg": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-1.5.3.tgz",
+      "integrity": "sha512-7Gn2IuQzvUQWPIuZuFHrzsTM0gkPz2RRT9OcbdmA03jeKk8kltrD8gqUzNX15ghY/4PV5bbe5lmD6yDLDY6Ybg==",
+      "requires": {
+        "jsdom": "^8.1.0",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^1.4.1",
+        "xmldom": "^0.1.22"
+      },
+      "dependencies": {
+        "abab": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz",
+          "integrity": "sha1-X6rZwsB/YN12dw9xzwJbYqY8/U4="
+        },
+        "acorn": {
+          "version": "2.7.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-2.7.0.tgz",
+          "integrity": "sha1-q259nYhqrKiwhbwzEreaGYQz8Oc="
+        },
+        "acorn-globals": {
+          "version": "1.0.9",
+          "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-1.0.9.tgz",
+          "integrity": "sha1-VbtemGkVB7dFedBRNBMhfDgMVM8=",
+          "requires": {
+            "acorn": "^2.1.0"
+          }
+        },
+        "cssstyle": {
+          "version": "0.2.37",
+          "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-0.2.37.tgz",
+          "integrity": "sha1-VBCXI0yyUTyDzu06zdwn/yeYfVQ=",
+          "requires": {
+            "cssom": "0.3.x"
+          }
+        },
+        "jsdom": {
+          "version": "8.5.0",
+          "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-8.5.0.tgz",
+          "integrity": "sha1-1Nj12/J2hjW2KmKCO5R89wcevJg=",
+          "requires": {
+            "abab": "^1.0.0",
+            "acorn": "^2.4.0",
+            "acorn-globals": "^1.0.4",
+            "array-equal": "^1.0.0",
+            "cssom": ">= 0.3.0 < 0.4.0",
+            "cssstyle": ">= 0.2.34 < 0.3.0",
+            "escodegen": "^1.6.1",
+            "iconv-lite": "^0.4.13",
+            "nwmatcher": ">= 1.3.7 < 2.0.0",
+            "parse5": "^1.5.1",
+            "request": "^2.55.0",
+            "sax": "^1.1.4",
+            "symbol-tree": ">= 3.1.0 < 4.0.0",
+            "tough-cookie": "^2.2.0",
+            "webidl-conversions": "^3.0.1",
+            "whatwg-url": "^2.0.1",
+            "xml-name-validator": ">= 2.0.1 < 3.0.0"
+          }
+        },
+        "parse5": {
+          "version": "1.5.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-1.5.1.tgz",
+          "integrity": "sha1-m387DeMr543CQBsXVzzK8Pb1nZQ="
+        },
+        "stackblur-canvas": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-1.4.1.tgz",
+          "integrity": "sha1-hJqm+UsnL/JvZHH6QTDtH35HlVs="
+        },
+        "tr46": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+          "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
+        },
+        "webidl-conversions": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+          "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
+        },
+        "whatwg-url": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-2.0.1.tgz",
+          "integrity": "sha1-U5ayBD8CDub3BNnEXqhRnnJN5lk=",
+          "requires": {
+            "tr46": "~0.0.3",
+            "webidl-conversions": "^3.0.0"
+          }
+        },
+        "xml-name-validator": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-2.0.1.tgz",
+          "integrity": "sha1-TYuPHszTQZqjYgYb7O9RXh5VljU="
+        }
+      }
+    },
     "capture-exit": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
@@ -4012,6 +4114,14 @@
         }
       }
     },
+    "css-line-break": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
+      "integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
+      "requires": {
+        "base64-arraybuffer": "^0.2.0"
+      }
+    },
     "css-loader": {
       "version": "3.4.2",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.4.2.tgz",
@@ -5733,6 +5843,10 @@
         "schema-utils": "^2.5.0"
       }
     },
+    "file-saver": {
+      "version": "github:eligrey/FileSaver.js#e865e37af9f9947ddcced76b549e27dc45c1cb2e",
+      "from": "github:eligrey/FileSaver.js#1.3.8"
+    },
     "filesize": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.0.1.tgz",
@@ -6433,6 +6547,14 @@
         }
       }
     },
+    "html2canvas": {
+      "version": "1.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-rc.5.tgz",
+      "integrity": "sha512-DtNqPxJNXPoTajs+lVQzGS1SULRI4GQaROeU5R41xH8acffHukxRh/NBVcTBsfCkJSkLq91rih5TpbEwUP9yWA==",
+      "requires": {
+        "css-line-break": "1.1.1"
+      }
+    },
     "htmlparser2": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
@@ -7728,6 +7850,42 @@
       "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
       "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM="
     },
+    "jspdf": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-1.5.3.tgz",
+      "integrity": "sha512-J9X76xnncMw+wIqb15HeWfPMqPwYxSpPY8yWPJ7rAZN/ZDzFkjCSZObryCyUe8zbrVRNiuCnIeQteCzMn7GnWw==",
+      "requires": {
+        "canvg": "1.5.3",
+        "file-saver": "github:eligrey/FileSaver.js#1.3.8",
+        "html2canvas": "1.0.0-alpha.12",
+        "omggif": "1.0.7",
+        "promise-polyfill": "8.1.0",
+        "stackblur-canvas": "2.2.0"
+      },
+      "dependencies": {
+        "base64-arraybuffer": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
+          "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg="
+        },
+        "css-line-break": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.0.1.tgz",
+          "integrity": "sha1-GfIGOjPpX7KDG4ZEbAuAwYivRQo=",
+          "requires": {
+            "base64-arraybuffer": "^0.1.5"
+          }
+        },
+        "html2canvas": {
+          "version": "1.0.0-alpha.12",
+          "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-alpha.12.tgz",
+          "integrity": "sha1-OxmS48mz9WBjw1/WIElPN+uohRM=",
+          "requires": {
+            "css-line-break": "1.0.1"
+          }
+        }
+      }
+    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -8630,6 +8788,11 @@
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
       "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
     },
+    "nwmatcher": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/nwmatcher/-/nwmatcher-1.4.4.tgz",
+      "integrity": "sha512-3iuY4N5dhgMpCUrOVnuAdGrgxVqV2cJpM+XNccjR2DKOB1RUP0aA+wGXEiNziG/UKboFyGBIoKOaNlJxx8bciQ=="
+    },
     "nwsapi": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
@@ -8767,6 +8930,11 @@
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
       "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
     },
+    "omggif": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/omggif/-/omggif-1.0.7.tgz",
+      "integrity": "sha1-WdLuywJj3oRjWz/riHwMmXPx5J0="
+    },
     "on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
@@ -10192,6 +10360,11 @@
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM="
     },
+    "promise-polyfill": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.1.0.tgz",
+      "integrity": "sha512-OzSf6gcCUQ01byV4BgwyUCswlaQQ6gzXc23aLQWhicvfX9kfsUiUhgt3CCQej8jDnl8/PhGF31JdHX2/MzF3WA=="
+    },
     "prompts": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.3.2.tgz",
@@ -10390,6 +10563,17 @@
         "whatwg-fetch": "^3.0.0"
       }
     },
+    "react-component-export-image": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/react-component-export-image/-/react-component-export-image-0.1.6.tgz",
+      "integrity": "sha512-Mxa2bcfU/xpjnD4rZGCWrK8w94qNX3XcV8OyxkaTOlbHx+iT7BliWugz1s8LGJCY26VWba/TGpI0Mwdo2XPtKg==",
+      "requires": {
+        "html2canvas": "^1.0.0-rc.5",
+        "jspdf": "^1.5.3",
+        "react": "^16.12.0",
+        "react-dom": "^16.12.0"
+      }
+    },
     "react-dev-utils": {
       "version": "10.2.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz",
@@ -11094,6 +11278,11 @@
       "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
       "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
     },
+    "rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha1-1lBezbMEplldom+ktDMHMGd1lF0="
+    },
     "rimraf": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
@@ -11823,6 +12012,11 @@
       "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.2.tgz",
       "integrity": "sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA=="
     },
+    "stackblur-canvas": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.2.0.tgz",
+      "integrity": "sha512-5Gf8dtlf8k6NbLzuly2NkGrkS/Ahh+I5VUjO7TnFizdJtgpfpLLEdQlLe9umbcnZlitU84kfYjXE67xlSXfhfQ=="
+    },
     "static-extend": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
@@ -13760,6 +13954,11 @@
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
     },
+    "xmldom": {
+      "version": "0.1.31",
+      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.31.tgz",
+      "integrity": "sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ=="
+    },
     "xregexp": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.3.0.tgz",

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "react": "^16.13.1",
+    "react-component-export-image": "^0.1.6",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"
   },

public/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="./favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

src/components/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ConfigCover from './ConfigCover';
 import Navbar from './Navbar';
+import ComponentToImg from './ComponentToImg';
 
 class App extends React.Component {
 
@@ -9,7 +10,6 @@ class App extends React.Component {
         return (
             <div>
                 <Navbar />
-
                 <ConfigCover />
             </div>
 

src/components/ComponentToImg.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { exportComponentAsJPEG, exportComponentAsPNG } from "react-component-export-image";
+// import CoverImage from './CoverImage'
+
+
+
+class ComponentToImg extends React.Component {
+    constructor(props) {
+        super(props);
+        this.componentRef = React.createRef();
+    }
+
+    render() {
+        return (
+            <React.Fragment>
+
+                <div ref={this.componentRef} style={{height:this.props.children.height}}>
+                    {this.props.children}
+                </div>
+
+                <button onClick={() => exportComponentAsJPEG(this.componentRef)}>
+                    Export As JPEG
+            </button>
+
+                <button onClick={() => exportComponentAsPNG(this.componentRef)}>
+                    Export As PNG
+            </button>
+            </React.Fragment>);
+    }
+
+}
+
+export default ComponentToImg;

src/components/ConfigCover.js

@@ -1,12 +1,16 @@
 import React from 'react';
 import './ConfigCover.css'
 import CoverImage from './CoverImage';
+import ComponentToImg from './ComponentToImg';
+
 class ConfigCover extends React.Component {
 
     state = {
         title: 'How I built my first project with react',
         bgcolor: '',
-        bxshadow: ''
+        bxshadow: '',
+        height:null,
+        width:null
     };
 
     render() {
@@ -17,14 +21,14 @@ class ConfigCover extends React.Component {
                     <input type="text" placeholder="Enter title here" className="inputTitle"
                         onChange={e => this.setState({ title: e.target.value })}></input>
 
-                    {/* <div className="d-flex flex-row">
+                    <div className="d-flex flex-row">
                         <label >width</label>
-                        <input type="number" name="width" className="input-sm"
+                        <input type="number"  className="input-sm"
-                        onChange={e=>this.setState({width:e.target.value})}></input>
+                        onChange={e=>this.setState({width: e.target.value})}></input>
                         <label >height</label>
-                        <input type="number" name="height" className="input-sm"
+                        <input type="number"  className="input-sm"
-                        onChange={e=>this.setState({height:e.target.value})}></input>
+                        onChange={e=>this.setState({height: e.target.value})}></input>
-                    </div> */}
+                    </div>
 
 
                     <label>Background</label>
@@ -38,13 +42,22 @@ class ConfigCover extends React.Component {
 
                 </div>
 
+<ComponentToImg>
+<CoverImage
+
+title={this.state.title}
+bgcolor={this.state.bgcolor}
+bxshadow={this.state.bxshadow}
+height={this.state.height}
+width={this.state.width}
+
+    
+/>
+</ComponentToImg>
+
+
 
-                <CoverImage
-                    title={this.state.title}
-                    bgcolor={this.state.bgcolor}
-                    bxshadow={this.state.bxshadow}
                 
-                />
 
 
 

src/components/CoverImage.css

@@ -3,13 +3,15 @@
     margin:auto;
     justify-content: center;
     align-items: center;
+    overflow: hidden;
+
 }
 .cover{
-    
+    /* width:800px;
-    width:800px;
+    height:420px; */
-    height:420px;
     background-color: #c5a8ff;
     text-align: center;
+    position:relative;
     
 }
 
@@ -20,8 +22,8 @@
    margin:50px;
    background-color: #ffffff; 
    display:inline-block;
-   box-shadow: 10px 10px  #8c52ff;
+   /* box-shadow: 10px 10px  #8c52ff; */
-
+position:relative;
    text-align: center;
    color:#676683;
    border:none;

src/components/CoverImage.js

@@ -1,21 +1,22 @@
 import React from 'react';
 import './CoverImage.css';
 
-
 class CoverImage extends React.Component {
 
 
 
-
     render() {
         return (
-            <div className="cover container"
+           <div className="img-fluid">
-                style={{ backgroundColor: this.props.bgcolor, height: this.props.height, width: this.props.width }}>
+            <div className="cover container "
+                style={{ backgroundColor:this.props.bgcolor, height: this.props.height, width: this.props.width }}>
                 <div className="card"
-                    style={{ boxShadow: `15px 15px ${this.props.bxshadow}` }}>
+                    style={{ border: `15px ${this.props.bxshadow}` }}>
                     <h1>{this.props.title}</h1>
                 </div>
             </div>
+            </div>
+            
         );
     }
 }

src/components/Navbar.js

@@ -3,7 +3,9 @@ import './App.css';
 
 const Navbar = () => {
 
-    return <nav className="navbar bg-dark"><h4>CoverView</h4></nav>;
+    return (
+    <nav className="navbar bg-dark">
+        <h4>CoverView</h4></nav>);