0

I'm using cropit.Js and it's returning base64 and I want to validate the size and extension on server side using php. Any help would be great. Thank you!

Jerin Oommen
  • 45
  • 1
  • 7

1 Answers1

1

I have investigated a bit your library. It appears to me that, in order to get the cropped image, you should be calling the "export" method, like this:

var imageData = $('#image-cropper').cropit('export');
// then send imageData to server

What you are getting from this, should be a Data URI of the cropped image, obtained via the toDataURL method of a Canvas. This should be a PNG image already (so you don't need to validate any extension). If you decode it, you should be able to determine its size (minus the data scheme).

You can get the actual image from your encoded string like this: Decoding a canvas todataURL (see the first comment in the accepted answer).

If you just need the size of the image, a strlen is sufficient (strlen = bytes):

$imageSizeInBytes = strlen(base64_decode($encodedImage)) - 22;

(or you may even get fancier, to avoid decoding it).

Community
  • 1
  • 1
Palantir
  • 23,820
  • 10
  • 76
  • 86
  • What if the user tries to do post method with base64 directly to my php script without going through the javascript file. how am I supposed to verify if its right extension. Thank you so much for your help. – Jerin Oommen Oct 14 '16 at 00:26
  • How are you doing the post? I can't find anything directly in cropit that would directly post to a server page... – Palantir Oct 14 '16 at 11:34
  • I'm using AJAX to do the post to php file. – Jerin Oommen Oct 14 '16 at 20:26
  • In that case, you will have your POSTed value in the $_POST field. You don't have any "file extension" to validate, because you are just receiving canvas data, i.e. a raw PNG file encoded in base64. You are not getting the original uploaded file. – Palantir Oct 15 '16 at 11:11
  • Okay cool, thank you so much! – Jerin Oommen Oct 16 '16 at 15:22