fengyuanchen / cropperjs

JavaScript image cropper.
https://fengyuanchen.github.io/cropperjs/
MIT License
13k stars 2.4k forks source link

Expose normalized crop params used to draw the image in getCroppedCanvas #495

Closed Paul-Ladyman closed 5 years ago

Paul-Ladyman commented 5 years ago

We'd be happy to look at providing a PR for any changes required here but first we wanted to describe our problem. There may be an existing solution or we may be doing something incorrect.

Is your feature request related to a problem? Please describe. Our application is performing two different crops, one on the client and one on the server, that we need to be identical.

Currently these two crops end up different because of the normalization that is done in getCroppedCanvas.

Describe the solution you'd like A public function that allows the results of the normalization that is done in getCroppedCanvas to be retrieved. This would allow us to pass the same crop parameters to our server that are used to produce the HTML canvas we display on the client.

Describe alternatives you've considered We've currently solved this by copying the normalizeDecimalNumber function into our own code base and using Math.floor() on the result. So far our testing has been positive but we'd like to get the crop parameters directly from cropperjs, as mentioned above, so that if this maths changes in the future our code won't need to be updated.

Another alternative we tried is to use setData to resize the crop box to the dimensions and position provided by getData but of course this still runs into the same problem as described above since the client version has still been normalized by getCroppedCanvas.

Additional context The reason we are cropping once in the client and a second time in the server is that we want to persist the result of the crop but we do not want the client to have to download another image file to display it. So instead we display the HTML canvas (using the dataURL) provided by getCroppedCanvas on the client, which means we don't have to download another image, and re-crop the image on the server side to persist the result.

Kind regards, Paul

fengyuanchen commented 5 years ago

Just copy the normalizeDecimalNumber utility function and apply it to the data output from the getData method before send it to the server.

fengyuanchen commented 5 years ago

Or only crop the image in one side and sync the cropped image to another side.