Croppie: Cannot crop image more then 1 MB, Jpeg on iPhone

[thetechie13]

I cannot upload any images greater then 1 MB on iPhone 5, 6. What can be the problem with croppie?

[lackneets]

+1

[thedustinsmith]

If you're referring to slowness, you might reference this case: #178.

If there's something else going on, you'll have to explain your problem.

[cannond13]

It's not slow or jumpy during manipulation within the Croppie UI; that aspect appears to function well with both large and small jpg and png files on both mobile and desktop browsers.

Rather, the problem seems to occur after clicking "Result" to trigger the image uploading and cropping. For .png images, every size image I've tried (500KB up to 5MB) will upload and crop successfully; for .jpg images, only images under about 900KB will successfully upload, crop and render. I'm working in Chrome v52 on late 2015 Mac OSX and Safari mobile on early 2016 iPhone 6s running iOS 9.3.5.

[thedustinsmith]

@cannond13 - Do you know if the slowness is from the result() method of croppie, or sending the base64 data to the server?

[cannond13]

I don't -- but for .jpg files over 900KB, the file does not reach my server, so I think the problem occurs before the data is sent.

But to distinguish this thread from #178, I don't encounter or observe slowness within the Croppie UI; it responds normally to drag and zoom gestures on both desktop (mouse) and mobile (touch) browsers. The hiccup occurs when executing the call to crop the image at the desired parameters and save it to disk.

[thedustinsmith]

If you're using chrome, you can use the network panel to inspect your request that is sending the image to the server. Is the image data there? Does the server just not respond?

I know there is a problem with safari sending large amounts of base64 data: #185, but I haven't seen it in chrome. Sounds kind of related. I haven't seen Croppie have a problem generating the base64 string.

[cannond13]

Once I select an image to load into the Croppie UI, the base64 data is there; after submitting using the Result method, nothing.

My understanding of base64 data is very limited; but if large .png (4MB+) files will successfully transfer, would that undermine the possibility that the base64 data transfer is the issue?

[thedustinsmith]

I'm not actually talking about the base64 we use to display the cropper, but the base64 image that is returned from result().

If you do the following:

croppieInstance.result({ type: 'canvas' }).then(function(dataUrl) { 
    console.log(dataUrl); 
});

Do you get the base64 url printed in your console? How are you submitting your cropped image?

[MentalGear]

Is this solved ?

[cannond13]

I never reached a solution and abandoned the plugin since that user feature is not critical to my product. I'm limited in JS and the developer who was helping me at the time moved on. Croppie seemed like a great alternative to developing a custom rig, but given my JS limitations, I had to just shelve it for the time being.

[thedustinsmith]

I'm going to close this issue since it's so old. If the issue persists, feel free to reopen the case with an example that demonstrates the issue.