idwall / idcrop

Polygonal image cropping plugin.
MIT License
18 stars 9 forks source link

Add documentation about implementations #17

Open brizental opened 6 years ago

brizental commented 6 years ago

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.

felquis commented 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>
    )
  }
}
sharifme04 commented 3 years ago

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.

felquis commented 3 years ago

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.