How to compress BLOB image stored in browser using javascript or reactjs and upload to server

Question

Task done by me

1. Select image using file input<input type="file" accept="image/*" multiple="multiple" />

2. Create Object url using url: URL.createObjectURL(file[0]). e.g url = blob:http://0.0.0.0:5002/e468fb70-d597-4b17-bb3a-ec6272f2d7fe.

3. Display the image in web page using <img src={ url } width="100px" height="100px" />

Now what I want to do is,

1. Read and Compress image from url=blob:http://0.0.0.0:5002/e468fb70-d597-4b17-bb3a-ec6272f2d7fe

2. Upload compressed image to server

This project is in reactjs. Your suggestion will be helpful to me.

Answer 1

1. Read blob as ArrayBuffer using FileReader, then draw it on canvas and then compress it and pull out the compressed BLOB.

Source code

2. Blob can be sent to server like any other data in body, nothing special is required for that.