mirror of
https://github.com/woodchen-ink/CoverView.git
synced 2025-07-18 05:51:56 +08:00
More Customizable Options
This commit is contained in:
AsishRaju
parent
d76b2031c8
commit
7a55911202
File diff suppressed because one or more lines are too long
@ -1,36 +1,33 @@
|
||||
import React from 'react';
|
||||
import React from "react";
|
||||
import { exportComponentAsJPEG, exportComponentAsPNG } from "react-component-export-image";
|
||||
import './CoverImage.css'
|
||||
|
||||
|
||||
import "./CoverImage.css";
|
||||
|
||||
class ComponentToImg extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.componentRef = React.createRef();
|
||||
}
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.componentRef = React.createRef();
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.props.children);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
|
||||
<div ref={this.componentRef}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
|
||||
{/* <button onClick={() => exportComponentAsJPEG(this.componentRef)}>
|
||||
Export As JPEG
|
||||
</button> */}
|
||||
|
||||
<button onClick={() => exportComponentAsPNG(this.componentRef)}>
|
||||
Download
|
||||
</button>
|
||||
|
||||
</React.Fragment>);
|
||||
}
|
||||
render() {
|
||||
console.log(this.props.children);
|
||||
let downloadButton;
|
||||
switch (this.props.downloadAs) {
|
||||
case "PNG":
|
||||
downloadButton = <button onClick={() => exportComponentAsPNG(this.componentRef)}>Download</button>;
|
||||
break;
|
||||
case "JPEG":
|
||||
downloadButton = <button onClick={() => exportComponentAsJPEG(this.componentRef)}>Download</button>;
|
||||
}
|
||||
console.log(downloadButton);
|
||||
|
||||
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;
|
||||
|
||||
@ -1,37 +1,49 @@
|
||||
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;
|
||||
body {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
@media screen and (max-width:600px){
|
||||
.main-container{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background-color: #fc5c65;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.main-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,80 +1,127 @@
|
||||
import React from 'react';
|
||||
import './ConfigCover.css'
|
||||
import CoverImage from './CoverImage';
|
||||
import ComponentToImg from './ComponentToImg';
|
||||
import '../assets/css/patterns.css'
|
||||
import React from "react";
|
||||
import "./ConfigCover.css";
|
||||
import CoverImage from "./CoverImage";
|
||||
import ComponentToImg from "./ComponentToImg";
|
||||
|
||||
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 {
|
||||
state = defaultSettings;
|
||||
|
||||
state = {
|
||||
title: 'How I built my first project with react',
|
||||
bgcolor: '',
|
||||
border: '',
|
||||
pattern: ''
|
||||
handleReset = () => {
|
||||
this.setState(defaultSettings);
|
||||
};
|
||||
|
||||
};
|
||||
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() {
|
||||
return (
|
||||
<div className="main-container">
|
||||
<div>
|
||||
<label>Background</label>
|
||||
<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>
|
||||
<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>
|
||||
<label>Text</label>
|
||||
<input type="color" value={this.state.textColor} onChange={(e) => this.setState({ textColor: e.target.value })} />
|
||||
</div>
|
||||
<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</label>
|
||||
<input type="color" defaultValue="#00ff99"
|
||||
onChange={e => this.setState({ bgcolor: e.target.value })} />
|
||||
|
||||
<label>border</label>
|
||||
<input type="color" defaultValue="#8c52ff"
|
||||
onChange={e => this.setState({ border: e.target.value })} />
|
||||
</div>
|
||||
|
||||
<label>Background Pattern</label>
|
||||
<select onChange={e => this.setState({ pattern: e.target.value })}
|
||||
className="form-control">
|
||||
<option>None</option>
|
||||
<option>graph-paper</option>
|
||||
<option>jigsaw</option>
|
||||
<option>hideout</option>
|
||||
<option>dots</option>
|
||||
<option>falling-triangles</option>
|
||||
<option>circuit-board</option>
|
||||
<option>temple</option>
|
||||
<option>anchors</option>
|
||||
<option>brickwall</option>
|
||||
<option>overlapping-circles</option>
|
||||
<option>wiggle</option>
|
||||
<option>tic-tac-toe</option>
|
||||
<option>leaf</option>
|
||||
<option>bubbles</option>
|
||||
<option>squares</option>
|
||||
|
||||
</select>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="blog-cover">
|
||||
<ComponentToImg>
|
||||
<CoverImage
|
||||
|
||||
title={this.state.title}
|
||||
bgcolor={this.state.bgcolor}
|
||||
border={this.state.border}
|
||||
pattern={this.state.pattern}
|
||||
|
||||
/>
|
||||
</ComponentToImg>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<label>Background Pattern</label>
|
||||
<select onChange={(e) => this.setState({ pattern: e.target.value })} className="form-control" value={this.state.pattern}>
|
||||
<option>None</option>
|
||||
<option>graph-paper</option>
|
||||
<option>jigsaw</option>
|
||||
<option>hideout</option>
|
||||
<option>dots</option>
|
||||
<option>falling-triangles</option>
|
||||
<option>circuit-board</option>
|
||||
<option>temple</option>
|
||||
<option>anchors</option>
|
||||
<option>brickwall</option>
|
||||
<option>overlapping-circles</option>
|
||||
<option>wiggle</option>
|
||||
<option>tic-tac-toe</option>
|
||||
<option>leaf</option>
|
||||
<option>bubbles</option>
|
||||
<option>squares</option>
|
||||
<option>explorer</option>
|
||||
<option>jupiter</option>
|
||||
<option>sun</option>
|
||||
</select>
|
||||
<label>Dowload As</label>
|
||||
<select onChange={(e) => this.setState({ download: e.target.value })} className="form-control" value={this.state.download}>
|
||||
<option>PNG</option>
|
||||
<option>JPEG</option>
|
||||
</select>
|
||||
<button className="reset-btn" onClick={this.handleReset}>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
<div className="blog-cover">
|
||||
<ComponentToImg downloadAs={this.state.download}>
|
||||
<CoverImage {...this.state} />
|
||||
</ComponentToImg>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ConfigCover;
|
||||
export default ConfigCover;
|
||||
|
||||
@ -1,21 +1,38 @@
|
||||
import React from 'react';
|
||||
import './CoverImage.css';
|
||||
import React from "react";
|
||||
import "./CoverImage.css";
|
||||
import "../assets/css/patterns.css";
|
||||
|
||||
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() {
|
||||
return (
|
||||
<div className={` cover ${this.props.pattern} `}
|
||||
style={{ backgroundColor: this.props.bgcolor }}>
|
||||
<div className={`${this.props.pattern}`}>
|
||||
<div className="title-card"
|
||||
style={{ borderTop: `18px solid ${this.props.border}` }}>
|
||||
<p>{this.props.title}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
render() {
|
||||
const { title, bgColor, borderColor, borderSize, borderType, pattern, foregroundColor, textColor, opacity } = this.props;
|
||||
const styleToApply = {
|
||||
borderTop: `${borderSize}px ${borderType} ${borderColor}`,
|
||||
backgroundColor: `${this.hexToRgbA(foregroundColor, opacity)}`,
|
||||
color: `${textColor}`,
|
||||
};
|
||||
return (
|
||||
<div className={` cover ${pattern} `} style={{ backgroundColor: bgColor }}>
|
||||
<div className={`${pattern}`}>
|
||||
<div className="title-card" style={styleToApply}>
|
||||
<p>{title}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CoverImage;
|
||||
export default CoverImage;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user