Browser side image compression steps show case:

1. Get file object from input[type="file"][accept="image/*"] control.

object File:

Or get lena_std file directly:

2. Use window.URL/FileReader to get image url(DataURL/window.URL), and load by Image DOM object.

Image
dataURL/BlobURL:

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: 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)