In my quest to crop images in the browser and upload them directly to a server as raw image binary data (either in "image/jpeg" or "image/png" format), I have tried various client-side methods for cropping and uploading. These methods typically utilize the canvas.toDataURL() function in HTML5 to obtain the cropped data in "data:image/png;base64" format, which is then uploaded to the web server before being converted into raw image binary data on the server side.
However, the challenge arises when attempting to upload the cropped data to a static file server like AWS S3, which lacks the capability to execute conversion code - it can only accept file uploads. As a result, I am seeking a solution that will allow me to upload the cropped images in a standard image format such as "image/png". By achieving this, I would be able to crop and upload images directly from the browser to the file server (S3) without the need for an intermediary server to handle the data conversion and transfer process.