mirror of
https://github.com/voltbonn/profile-picture-generator.git
synced 2024-12-22 07:45:04 +00:00
indetion
This commit is contained in:
parent
2a792ab426
commit
b75188b3f4
1 changed files with 23 additions and 23 deletions
46
src/App.js
46
src/App.js
|
@ -83,30 +83,30 @@ function App() {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="App" {...getRootProps()}>
|
<div className="App" {...getRootProps()}>
|
||||||
<img src={HeaderImage} className="HeaderImage" alt="Volt Logo" />
|
<img src={HeaderImage} className="HeaderImage" alt="Volt Logo" />
|
||||||
|
|
||||||
<div className={isDragActive ? 'droparea active' : 'droparea'}>
|
<div className={isDragActive ? 'droparea active' : 'droparea'}>
|
||||||
Drop your photo here ...
|
Drop your photo here ...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Choose your Photo:</h2>
|
||||||
|
<p>It should best be a square image or your face in the middle. The photo is not saved and never leaves your computer.</p>
|
||||||
|
|
||||||
|
<label className="labelButton" tabIndex="0" style={{outline:'none'}}>
|
||||||
|
{!!photo ? <img src={originalPhoto} alt="Preview" /> : null}
|
||||||
|
<span>{!!photo ? 'Change Photo' : 'Load Photo'}</span>
|
||||||
|
<input onChange={handleImage} type="file" accept="image/*" style={{display: 'none'}} />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<FrameChooser onFrameChange={handleFrameURL} />
|
||||||
|
|
||||||
|
<h2>Download your Photo:</h2>
|
||||||
|
<img src={combinedImage} className="FinishedFrame" alt="Finished Frame" />
|
||||||
|
<button onClick={() => download(combinedImage, "volt-profile-picture.png", "image/png")}>Download Profile Picture</button>
|
||||||
</div>
|
</div>
|
||||||
|
)
|
||||||
<h2>Choose your Photo:</h2>
|
|
||||||
<p>It should best be a square image or your face in the middle. The photo is not saved and never leaves your computer.</p>
|
|
||||||
|
|
||||||
<label className="labelButton" tabIndex="0" style={{outline:'none'}}>
|
|
||||||
{!!photo ? <img src={originalPhoto} alt="Preview" /> : null}
|
|
||||||
<span>{!!photo ? 'Change Photo' : 'Load Photo'}</span>
|
|
||||||
<input onChange={handleImage} type="file" accept="image/*" style={{display: 'none'}} />
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<FrameChooser onFrameChange={handleFrameURL} />
|
|
||||||
|
|
||||||
<h2>Download your Photo:</h2>
|
|
||||||
<img src={combinedImage} className="FinishedFrame" alt="Finished Frame" />
|
|
||||||
<button onClick={() => download(combinedImage, "volt-profile-picture.png", "image/png")}>Download Profile Picture</button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|
Loading…
Reference in a new issue