wood/CoverView
1
0
Fork 0
mirror of https://github.com/woodchen-ink/CoverView.git synced 2025-07-18 14:01:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: convert component to an image

Browse Source
This commit is contained in:
rutik wankhade 2020-08-07 09:08:21 +05:30
parent 0c7125ee6d
commit 111d355545
13 changed files with 277 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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"
},

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 KiB

BIN
public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

2
public/index.html
View File

@ -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

BIN
public/logo192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

BIN
public/logo512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.4 KiB

2
src/components/App.js
View File

@ -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>

33
src/components/ComponentToImg.js Normal file
View File

@ -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;

37
src/components/ConfigCover.js
View File

@ -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"
onChange={e=>this.setState({width:e.target.value})}></input>
<input type="number" className="input-sm"
onChange={e=>this.setState({width: e.target.value})}></input>
<label >height</label>
<input type="number" name="height" className="input-sm"
onChange={e=>this.setState({height:e.target.value})}></input>
</div> */}
<input type="number" className="input-sm"
onChange={e=>this.setState({height: e.target.value})}></input>
</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}
/>

12
src/components/CoverImage.css
View File

@ -3,13 +3,15 @@
margin:auto;
justify-content: center;
align-items: center;
overflow: hidden;
}
.cover{
width:800px;
height:420px;
/* width:800px;
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;

11
src/components/CoverImage.js
View File

@ -1,21 +1,22 @@
import React from 'react';
import './CoverImage.css';
class CoverImage extends React.Component {
render() {
return (
<div className="cover container"
style={{ backgroundColor: this.props.bgcolor, height: this.props.height, width: this.props.width }}>
<div className="img-fluid">
<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>
);
}
}

4
src/components/Navbar.js
View File

@ -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>);