Crop or resize images before upload to the server as raw image binary data (png or jpeg) [closed]

Question

I am trying to crop images in the browser and upload them to a server as raw image binary data (the format should be "image/jpeg" or "image/png"). I tried many client-side crop & upload methods, they all use the html 5 function canvas.toDataURL() to get the final cropped data in "data:image/png;base64" format, upload it to the web server and then convert it into raw image binary data at the server side.

The thing is that I have to upload the cropped data into a static file server like AWS S3 which can't execute converting code, except for accepting file uploading. Therefore, what I need is to upload the cropped images as a normal image format like "image/png". If this can be done, I can use the browser to crop & upload images directly to the file server (S3) and I don't need a middle server to convert the image data and transfer it to the file server (S3).

Answer 1

You can try Crop Upload, a HTML5-based javascript plugin which crops the image in the canvas element, converts the canvas to a blob and uploads it as png or jpeg to the server by AJAX. It doesn't need any server-side code at all, but it can only run in those browsers which support HTML 5.

EDIT: The link to the plugin has expired.