1
0
Fork 0
mirror of https://github.com/voltbonn/profile-picture-generator.git synced 2024-12-22 07:45:04 +00:00
This commit is contained in:
thomasrosen 2021-01-21 22:13:04 +01:00
parent 2a792ab426
commit b75188b3f4

View file

@ -83,30 +83,30 @@ function App() {
return (
<div className="App" {...getRootProps()}>
<img src={HeaderImage} className="HeaderImage" alt="Volt Logo" />
return (
<div className="App" {...getRootProps()}>
<img src={HeaderImage} className="HeaderImage" alt="Volt Logo" />
<div className={isDragActive ? 'droparea active' : 'droparea'}>
Drop your photo here ...
<div className={isDragActive ? 'droparea active' : 'droparea'}>
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>
<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;