Open brizental opened 6 years ago
I did something like:
import IdCropVendor from 'idcrop';
import 'idcrop/dist/css/main.min.css';
import shortid from 'shortid';
class IdCrop extends Component {
constructor(props) {
super(props)
this.displaySelector = shortid.generate()
this.toolbarSelector = shortid.generate()
this.previewSelector = shortid.generate()
}
componentDidMount() {
const idd = new IdCropVendor({
displaySelector: '#' + this.displaySelector,
// toolbarSelector: '#' + this.toolbarSelector,
previewSelector: '#' + this.previewSelector,
allowUpload: false,
src: 'http://lorempixel.com/500/500/'
});
console.log(idd)
idd.init()
}
render () {
return (
<div>
<div id={this.displaySelector}>displaySelector</div>
<div id={this.toolbarSelector}>toolbarSelector</div>
<div
id={this.previewSelector}
style={{
backgroundImage: this.props.base64,
}}
>previewSelector</div>
</div>
)
}
}
How to get the based64
string or blob
here after crop? also with react , it does not work ref
instead of id
. generally we do not use Id
in react, we use useRef
. There is no info how to implement in react hooks.
As far as I remember: the project I worked on back in 2018 we switched back to any other image cropping lib that worked ok with React. IDWall software was only used in the backend integrations. cc @sharifme04 I wouldn't recommend using this repo anymore.
It would be nice to have a sort of examples page, where we list and exemplify how one could go about integrating the cropper with any platform. For example:
etc.