Add ability to upload memeified images
This commit is contained in:
parent
73008347ca
commit
0f201cb0b9
2 changed files with 19 additions and 2 deletions
|
@ -216,7 +216,7 @@ export default class Creatify extends Component {
|
|||
<Select style={{ flex: 1 }} isSearchable={false} options={state.fontOptions} onChange={(option) => this.setFont(option.fontName)} />
|
||||
</div>
|
||||
<div style={spacerCss} />
|
||||
<div onClick={() => this.onSave()} style={{ alignItems: 'center', alignSelf: 'stretch', color: '#fff', border: '1px solid #fff', display: 'flex', padding: '0 0.6em' }}>
|
||||
<div onClick={() => this.onSave()} style={{ alignItems: 'center', alignSelf: 'stretch', border: '1px solid #fff', borderRadius: '4px', color: '#fff', display: 'flex', padding: '0 0.6em' }}>
|
||||
<span>Save</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -126,6 +126,23 @@ class Dropzone extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
selectFileFromCanvas (canvas) {
|
||||
const destinationFormat = 'image/jpeg';
|
||||
|
||||
canvas.toBlob((blob) => {
|
||||
const file = new File([blob], 'memeify.jpg', {
|
||||
type: destinationFormat,
|
||||
});
|
||||
|
||||
this.props.selectFile(file);
|
||||
|
||||
// TODO: Add ability to reset.
|
||||
this.setState({
|
||||
memeify: false,
|
||||
});
|
||||
}, destinationFormat, 0.95);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { dragOver, mouseOver, dimPreview, filePreview, memeify } = this.state;
|
||||
const { file, thumbnail, fileError, isUpdate, sourceUrl, fileExt } = this.props;
|
||||
|
@ -154,7 +171,7 @@ class Dropzone extends React.Component {
|
|||
};
|
||||
|
||||
const memeifyContent = memeify && file && filePreview ? (
|
||||
<Creatify flex toolbarClassName={'dropzone-memeify-toolbar'}>
|
||||
<Creatify flex toolbarClassName={'dropzone-memeify-toolbar'} onSave={(canvas) => this.selectFileFromCanvas(canvas)}>
|
||||
<div style={{ background: '#fff', flex: 1 }}>
|
||||
<img style={{ width: '100%' }} src={filePreview} />
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue