Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add documentation about implementations #17

Open
brizental opened this issue Jan 9, 2018 · 3 comments
Open

Add documentation about implementations #17

brizental opened this issue Jan 9, 2018 · 3 comments

Comments

@brizental
Copy link
Contributor

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:

  • React
  • Angular
  • Vue
  • VanillaJS
  • Ember

etc.

@felquis
Copy link

felquis commented Apr 12, 2018

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
Copy link

sharifme04 commented Jun 25, 2021

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
Copy link

felquis commented Jun 28, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants