Crop or resize images before uploading to the server as binary binary image data (png or jpeg)

Question

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

The fact is that I have to upload the cropped data to a static file server, such as AWS S3, which cannot execute the conversion code, except for receiving file uploads. Therefore, I need to load cropped images as a normal image format , such as "image / png". If this can be done, I can use a browser to crop and upload images directly to the file server (S3), and I do not need a middle server to convert the image data and transfer it to the file server (S3).

Answer 1

You can try Crop Upload , an HTML5-based javascript plugin that clips the image in the canvas element, converts the canvas to blob and uploads it as png or jpeg to the AJAX server. It does not require any server-side code at all, but it can only work in browsers that support HTML 5.

EDIT: The link to the plugin has expired.

Answer 2

Take a look at Filepicker.io , which offers JavaScript-based file writing that includes cropping / resizing functions and supports uploading to S3 and another cloud storage service, without the need for server-side code. Please note: some features require a paid plan.