Plugin increases the file size after cropping in ionic .Cropped images are larger than original images

[tanmaybhatt]

Original file was about 154 kb , after cropping it was 784kb . Another file was about 500kb which turned to 2.2 MB after cropping.
I used Cordova Camera plugin to get the File URI then i fed it to jr Crop function and then i saved it to the storage through File Transfer plugin

[JrSchild]

See the examples folder. You should use the toBlob function to turn it into a binary before transferring it. I have used the blueimp polyfill, I plan to shiv it in the future by default. I have not tested it with the File Transfer plugin, but using FormData() should work (also in examples).

Let me know if that worked.

[tanmaybhatt]

I tired toBlob on android , It says canvas.toBlob is not a function but i found a workaround by reducing resolution through targetWidth and targetHeight in camera plugin.

[JrSchild]

To use toBlob on Android you should include the polyfill. But you've found your own workaround.

[tanmaybhatt]

Thanks Anyways,
Also When i use camera plugin it saves every selected image in cache so when you select image for the second time it overwrites the cache but the changes doesnt reflect in the DOM . So i think you should add some unique value (time in milliseconds) in the src value where you create img tag and add url to source

252  .prop('src', this.options.url+"?t=" + new Date().getTime());

[JrSchild]

Ah cachebust! Thank you, I'll close this again when it's fixed.

[tanmaybhatt]

Yeah sure... 😄

[JrSchild]

The problem with your modification is that there are edge cases that I think need to be resolved to do something like this. It will probably break or throw errors when: 1) a user puts base64 data as url, 2) the url already contains a question mark.

[tanmaybhatt]

Yeah , you are absolutely correct.

I think with base64 data cachebust wont be a problem so no modification is required.
If the url already contains a question mark we can add this variable just after ? as below

var url = this.options.url.split('?');
and use it like
.prop('src', url[0]+"?t=" + new Date().getTime() +"&"+url[1]);

because there must not be more than one question mark in the url and alse there must be some url variables after question mark.
So normally we can have 3 different codes for all 3 conditions.
Its definitely not the best solution but may work.