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

More Customizable Options

Browse Source
This commit is contained in:
AsishRaju 2020-08-18 18:56:59 +05:30
parent d76b2031c8
commit 7a55911202
5 changed files with 288 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/assets/css/patterns.css
View File

File diff suppressed because one or more lines are too long

53
src/components/ComponentToImg.js
View File

@ -1,36 +1,33 @@
import React from 'react'; import React from "react";
import { exportComponentAsJPEG, exportComponentAsPNG } from "react-component-export-image"; import { exportComponentAsJPEG, exportComponentAsPNG } from "react-component-export-image";
import './CoverImage.css' import "./CoverImage.css";
class ComponentToImg extends React.Component { class ComponentToImg extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.componentRef = React.createRef(); this.componentRef = React.createRef();
} }
render() { render() {
console.log(this.props.children); console.log(this.props.children);
let downloadButton;
return ( switch (this.props.downloadAs) {
<React.Fragment> case "PNG":
downloadButton = <button onClick={() => exportComponentAsPNG(this.componentRef)}>Download</button>;
<div ref={this.componentRef}> break;
{this.props.children} case "JPEG":
</div> downloadButton = <button onClick={() => exportComponentAsJPEG(this.componentRef)}>Download</button>;
}
{/* <button onClick={() => exportComponentAsJPEG(this.componentRef)}> console.log(downloadButton);
Export As JPEG
</button> */}
<button onClick={() => exportComponentAsPNG(this.componentRef)}>
Download
</button>
</React.Fragment>);
}
return (
<React.Fragment>
<div ref={this.componentRef}>{this.props.children}</div>
{/* <button onClick={() => exportComponentAsPNG(this.componentRef)}>Download</button> */}
{downloadButton}
</React.Fragment>
);
}
} }
export default ComponentToImg; export default ComponentToImg;

80
src/components/ConfigCover.css
View File

@ -1,37 +1,49 @@
body{background-color: #f2f2f2;} body {
background-color: #f2f2f2;
.main-container{
width:auto;
justify-content: center;
align-items: center;
display:flex;
flex-direction: row;
}
.tagline{max-width: 300px;}
.inputData{
display:flex;
flex-direction: column;
align-items: center;
padding:15px;
}
.blog-cover{
display: flex;
flex-direction: column;
}
label{margin:5px;}
input{margin:4px;}
.inputTitle{
height:40px;
width:auto;
border-radius:4px;
padding-left:20px;
} }
@media screen and (max-width:600px){ .main-container {
.main-container{ width: auto;
display:flex; justify-content: center;
flex-direction:column; align-items: center;
} display: flex;
flex-direction: row;
}
.tagline {
max-width: 300px;
}
.inputData {
display: flex;
flex-direction: column;
align-items: center;
padding: 15px;
}
.blog-cover {
display: flex;
flex-direction: column;
}
label {
margin: 5px;
}
input {
margin: 4px;
}
.inputTitle {
height: 40px;
width: auto;
border-radius: 4px;
padding-left: 20px;
}
.reset-btn {
background-color: #fc5c65;
margin-top: 10px;
}
@media screen and (max-width: 600px) {
.main-container {
display: flex;
flex-direction: column;
}
} }

185
src/components/ConfigCover.js
View File

@ -1,80 +1,127 @@
import React from 'react'; import React from "react";
import './ConfigCover.css' import "./ConfigCover.css";
import CoverImage from './CoverImage'; import CoverImage from "./CoverImage";
import ComponentToImg from './ComponentToImg'; import ComponentToImg from "./ComponentToImg";
import '../assets/css/patterns.css'
const defaultSettings = {
title: "How I built my first project with react",
bgColor: "#00ff99",
borderColor: "#8c52ff",
borderSize: "18",
borderType: "solid",
pattern: "",
download: "PNG",
foregroundColor: "#ffffff",
textColor: "#676683",
opacity: 1,
};
class ConfigCover extends React.Component { class ConfigCover extends React.Component {
state = defaultSettings;
state = { handleReset = () => {
title: 'How I built my first project with react', this.setState(defaultSettings);
bgcolor: '', };
border: '',
pattern: ''
}; render() {
return (
<div className="main-container">
<div className="inputData card">
<h1>CoverView</h1>
<p className="tagline">🛠 Create awesome cover images for your blog posts quickly</p>
<input
type="text"
placeholder="Enter title here"
className="inputTitle form-control"
onChange={(e) => this.setState({ title: e.target.value })}
></input>
render() { <div>
return ( <label>Background</label>
<div className="main-container"> <input type="color" value={this.state.bgColor} onChange={(e) => this.setState({ bgColor: e.target.value })} />
<div className="inputData card"> <label>Border</label>
<input type="color" value={this.state.borderColor} onChange={(e) => this.setState({ borderColor: e.target.value })} />
</div>
<div>
<label>Foreground</label>
<input
type="color"
value={this.state.foregroundColor}
onChange={(e) => this.setState({ foregroundColor: e.target.value })}
/>
<h1>CoverView</h1> <label>Text</label>
<p className="tagline">🛠 Create awesome cover images for your blog posts quickly</p> <input type="color" value={this.state.textColor} onChange={(e) => this.setState({ textColor: e.target.value })} />
<input type="text" placeholder="Enter title here" className="inputTitle form-control" </div>
onChange={e => this.setState({ title: e.target.value })}></input> <label>Opacity</label>
<input
type="range"
min="0"
max="1"
step="0.1"
value={this.state.opacity}
onChange={(e) => this.setState({ opacity: e.target.value })}
></input>
<label>Border size</label>
<input type="number" value={this.state.borderSize} onChange={(e) => this.setState({ borderSize: e.target.value })} />
<label>Border type</label>
<select
onChange={(e) => this.setState({ borderType: e.target.value })}
className="form-control"
value={this.state.borderType}
>
<option>dotted</option>
<option>dashed</option>
<option>solid</option>
<option>double</option>
<option>groove</option>
<option>ridge</option>
<option>inset</option>
<option>outset</option>
<option>none</option>
</select>
<div> <label>Background Pattern</label>
<label>Background</label> <select onChange={(e) => this.setState({ pattern: e.target.value })} className="form-control" value={this.state.pattern}>
<input type="color" defaultValue="#00ff99" <option>None</option>
onChange={e => this.setState({ bgcolor: e.target.value })} /> <option>graph-paper</option>
<option>jigsaw</option>
<label>border</label> <option>hideout</option>
<input type="color" defaultValue="#8c52ff" <option>dots</option>
onChange={e => this.setState({ border: e.target.value })} /> <option>falling-triangles</option>
</div> <option>circuit-board</option>
<option>temple</option>
<label>Background Pattern</label> <option>anchors</option>
<select onChange={e => this.setState({ pattern: e.target.value })} <option>brickwall</option>
className="form-control"> <option>overlapping-circles</option>
<option>None</option> <option>wiggle</option>
<option>graph-paper</option> <option>tic-tac-toe</option>
<option>jigsaw</option> <option>leaf</option>
<option>hideout</option> <option>bubbles</option>
<option>dots</option> <option>squares</option>
<option>falling-triangles</option> <option>explorer</option>
<option>circuit-board</option> <option>jupiter</option>
<option>temple</option> <option>sun</option>
<option>anchors</option> </select>
<option>brickwall</option> <label>Dowload As</label>
<option>overlapping-circles</option> <select onChange={(e) => this.setState({ download: e.target.value })} className="form-control" value={this.state.download}>
<option>wiggle</option> <option>PNG</option>
<option>tic-tac-toe</option> <option>JPEG</option>
<option>leaf</option> </select>
<option>bubbles</option> <button className="reset-btn" onClick={this.handleReset}>
<option>squares</option> Reset
</button>
</select> </div>
<div className="blog-cover">
</div> <ComponentToImg downloadAs={this.state.download}>
<CoverImage {...this.state} />
<div className="blog-cover"> </ComponentToImg>
<ComponentToImg> </div>
<CoverImage </div>
);
title={this.state.title} }
bgcolor={this.state.bgcolor}
border={this.state.border}
pattern={this.state.pattern}
/>
</ComponentToImg>
</div>
</div>
);
}
} }
export default ConfigCover; export default ConfigCover;

47
src/components/CoverImage.js
View File

@ -1,21 +1,38 @@
import React from 'react'; import React from "react";
import './CoverImage.css'; import "./CoverImage.css";
import "../assets/css/patterns.css";
class CoverImage extends React.Component { class CoverImage extends React.Component {
hexToRgbA(hex, opacity) {
var c;
if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
c = hex.substring(1).split("");
if (c.length == 3) {
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c = "0x" + c.join("");
return "rgba(" + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(",") + `,${opacity})`;
}
throw new Error("Bad Hex");
}
render() { render() {
return ( const { title, bgColor, borderColor, borderSize, borderType, pattern, foregroundColor, textColor, opacity } = this.props;
<div className={` cover ${this.props.pattern} `} const styleToApply = {
style={{ backgroundColor: this.props.bgcolor }}> borderTop: `${borderSize}px ${borderType} ${borderColor}`,
<div className={`${this.props.pattern}`}> backgroundColor: `${this.hexToRgbA(foregroundColor, opacity)}`,
<div className="title-card" color: `${textColor}`,
style={{ borderTop: `18px solid ${this.props.border}` }}> };
<p>{this.props.title}</p> return (
</div> <div className={` cover ${pattern} `} style={{ backgroundColor: bgColor }}>
</div> <div className={`${pattern}`}>
</div> <div className="title-card" style={styleToApply}>
); <p>{title}</p>
} </div>
</div>
</div>
);
}
} }
export default CoverImage; export default CoverImage;