Allow users to select an image and crop it inline, removing user confusion when the image is later served and freeing up those precious cycles on the backend
npm install --save viewfinder
import Viewfinder from 'viewfinder';
if (process.env.BROWSER) {
require('viewfinder/dist/viewfinder.css');
}
class App extends React.Component {
save() {
const a = document.createElement("a");
a.style.display = 'none';
document.body.appendChild(a);
// out takes an optional parameter that scales output image relative
// to the DOM image
a.href = this.image.out(4);
a.download = 'viewfinder-image.png';
a.click();
}
render() {
return (
<Viewfinder
ref={ (c) => this.image = c.image }
scale={ 0.5 } />
<Button onClick={ this.save.bind(this) }>
Save
</Button>
);
}
}
export default App;