how can i skip the onChange and onComplete call in onImageLoad function?
See original GitHub issueI 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:
- Created 5 years ago
- Comments:6 (3 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@DominicTobias add return false to
onImageLoaded
callback works for me now. Thanks a lot ~@xwillmadeit Whoops 😅 it’s published now