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

Crop zone exceeds natural image size #24

Closed
ClaudiuHar opened this issue Mar 15, 2016 · 7 comments
Closed

Crop zone exceeds natural image size #24

ClaudiuHar opened this issue Mar 15, 2016 · 7 comments

Comments

@ClaudiuHar
Copy link

The image returned by cropper is much larger than the original image.

It seems that fengyuanchen cropper had this issue, but it is fixed now. See issue:
fengyuanchen/cropper#34

Can you confirm witch version of fengyuanchen is used by react-cropper?

Also I still have this problem, so when uploading a 300kb file it become 1.9Mb after cropping; the difference is huge.

@roadmanfong
Copy link
Collaborator

Could you check what version of react-cropper are you using?

The latest version of recat-cropper is using https://www.npmjs.com/package/cropperjs not https://www.npmjs.com/package/cropper.

If you use the latest version of react-cropper 0.6.2 and still have this problem, would you please attach the screenshot to this discussion?

@ClaudiuHar
Copy link
Author

React code where I call react-cropper:

`var ReactAddAndCropImages = React.createClass({
...
_cropImage: function(){
var newImage = {
...
data: this.refs.cropper.getCroppedCanvas().toDataURL(),
};
...
},
...
render: function(){
return(
<ReactCropper
ref='cropper'
src={this.state._originalImage}
style={{height: 400, width: 600}}
autoCropArea={0.2}
background={false}
dragMode='move'
viewMode='0'
cropBoxResizable={false}
cropBoxMovable={false}
strict={false}

                                minCropBoxWidth={600}
                                minCropBoxHeight={400}
                                guides={false}

                                minCanvasWidth={600}
                                minCanvasHeight={400}

                                crop={this._crop} />
                   ...`

1 I add a jpeg image but cropper returns a png;
2 data returned by cropper at: data: this.refs.cropper.getCroppedCanvas().toDataURL(), is actually in different size that the original one.

Screen shot:
screen shot 2016-03-15 at 4 17 57 pm
screen shot 2016-03-15 at 4 18 25 pm
screen shot 2016-03-15 at 4 18 38 pm
screen shot 2016-03-15 at 4 18 47 pm

Uploaded images:
9658_1_other_wallpapers
475364505a57a744d4a8a0c1df301503a42bce738b52c369346647107ff44990wallpaper_hd_assassins_creed_3_games_wide

result images
frp_image_56e79b745ad79

frp_image_56e79b745238f

@ClaudiuHar
Copy link
Author

Any suggestions?

@ClaudiuHar
Copy link
Author

It turns out that the issue is the image, not the cropper.
Thank you.

@PGDJ
Copy link

PGDJ commented Mar 14, 2017

@ClaudiuHar may I ask how you handled the uploading of multiple images and getting rid of the background sizing?

@oliviazhangjuan
Copy link

Is the problem solved?@ClaudiuHar

@bowling00
Copy link

It seems that the problem is still there, and it is related to the picture, sometimes it is 10 times larger, sometimes only 2 times larger

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

No branches or pull requests

5 participants