question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

how can i skip the onChange and onComplete call in onImageLoad function?

See original GitHub issue

I have some code like this below

calculateMyCropData = ({ naturalWidth, naturalHeight }, pixelCrop) => {
    const { limitSize } = this.props

    const pixelWidth = limitSize
      ? Math.min(limitSize.width, naturalWidth)
      : pixelCrop.width
    const pixelHeight = limitSize
      ? Math.min(limitSize.height, naturalHeight)
      : pixelCrop.height

    const width = (pixelWidth / naturalWidth) * 100
    const height = (pixelHeight / naturalHeight) * 100

    const x =  50 - width / 2
    const y =  50 - height / 2

    return {
      crop: {
        x,
        y,
        width,
        height
      },
      pixelCrop: {
        width: pixelWidth,
        height: pixelHeight,
        x: Math.ceil((x * naturalWidth) / 100),
        y: Math.ceil((y * naturalHeight) / 100)
      }
    }
}

onImageLoaded = (image, pixelCrop) => {
    const { crop, pixelCrop: computedPixelCrop } = this.calculateMyCropData(
      image,
      pixelCrop
    )

    /** 
     * this crop object is something like this { x: 0, y: 10, width: 100, height: 80}
     * for example i want to center the crop box, and also get the pixelCrop value 
     */
    this.setState({ crop, pixelCrop: computedPixelCrop })
 }

  onCropChange = (crop, pixelCrop) => {
    /** 
     * this crop is passed down by [resolveCrop](https://github.com/DominicTobias/react-image-crop/blob/master/lib/ReactCrop.js#L460)
     * this crop value is not the same as the crop value in handleImageLoaded function
     * but the onChange function is called right after the onImageLoaded function,so here setState override my crop state set in onImageLoaded
     */
    this.setState({
      crop,
      pixelCrop
    })
 }

My question is how can i skip the onChange and onComplete call in onImageLoad function, so i can use the right crop state set in onImageLoad function

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
xwillmadeitcommented, Mar 6, 2019

@DominicTobias add return false to onImageLoaded callback works for me now. Thanks a lot ~

0reactions
DominicTobiascommented, Mar 6, 2019

@xwillmadeit Whoops 😅 it’s published now

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to make React input onChange set state only after ...
Goal I want to program an onChange function so that the output is only updated when the onChange has not fired an event...
Read more >
react-image-crop - npm
A responsive image cropping tool for React. Latest version: 10.0.9, last published: a month ago. Start using react-image-crop in your ...
Read more >
So you want to use a Web Worker - Povio
A two-stage process begins with creating a list of draw calls. ... can simply use the new data on the main thread via...
Read more >
The JS9 Public API
This routine will pre-load images into a JS9 display. It can be added to the web page body element using the onload() JavaScript...
Read more >
Viewing online file analysis results for 'three.js'
_w;return array;},onChange: function ( callback ) {this. ... createElementNS( 'http://www.w3.org/1999/xhtml', 'img' );function onImageLoad() {image.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found