Browser side image compression steps show case:
2. Use window.URL/FileReader to get image url(DataURL/window.URL), and load by Image DOM object.
3. Draw Image to the canvas.
4. Use canvas.toDataURL to compress the image, and export the base-64 encode dataURL string.
mimeType:
sourceFileSize:
CompressedFileSize:
dataURL:
CompressedImage:
CompressionDuring:
5. Decode the base-64 string to binaryString by using window.atob.
Base64-ContentType:
pureBase64Data:
binaryString:
6. Concat the binaryString to multipart format string.
multipart/form-data binaryString:
7. Convert the multipart format string to ArrayBuffer by using Uint8Array.
Uint8Array Buffer:
Notice: If you want to upload file to the server.
Please try to start with the local server to test.
https://github.com/blade254353074/image-compress
0x01. Send the arrayBuffer by XMLHttpRequest.(After step 7)
0x02. Send the blob by XMLHttpRequest and FormData.(After step 4)
0x03. Use form to upload file.(For comparison)