ImgCompression.js

/*
<input type="file" multiple class="my-image-field" />
<div class="row">
    <div class="col-md-6">
        <h2>Before</h2>
        <img src="" id="before" alt="Before" />
    </div>
    <div class="col-md-6">
        <h2>After</h2>
        <img src="" id="after" alt="After" />
    </div>
</div>
*/
<script>
// https://pqina.nl/blog/compress-image-before-upload/#saving-the-compressed-image-back-to-the-file-input
    const compressImage = async (file, { quality = 1, type = file.type }) => {
        // Get as image data
        const imageBitmap = await createImageBitmap(file);

        // Draw to canvas
        const canvas = document.createElement('canvas');
        canvas.width = imageBitmap.width;
        canvas.height = imageBitmap.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(imageBitmap, 0, 0);

        // Turn into Blob
        const blob = await new Promise((resolve) =>
            canvas.toBlob(resolve, type, quality)
        );

        // Turn Blob into File
        return new File([blob], file.name, {
            type: blob.type,
        });
    };

    // Get the selected file from the file input
    const input = document.querySelector('.my-image-field');
    input.addEventListener('change', async (e) => {
        // Get the files
        const { files } = e.target;

        // No files selected
        if (!files.length) return;
//         console.info("Before compression", files);
        console.log("Before compression", files[0].size);
        document.getElementById('before').src = URL.createObjectURL(files[0]);
        // We'll store the files in this data transfer object
        const dataTransfer = new DataTransfer();

        // For every file in the files list
        for (const file of files) {
            // We don't have to compress files that aren't images
            if (!file.type.startsWith('image')) {
                // Ignore this file, but do add it to our result
                dataTransfer.items.add(file);
                continue;
            }

            // We compress the file by 50%
            const compressedFile = await compressImage(file, {
                quality: 0.5,
                // type: 'image/jpeg',
                type: file.type,
            });

            // Save back the compressed file instead of the original file
            dataTransfer.items.add(compressedFile);
        }
        console.log("After compression", dataTransfer.files);
        // Set value of the file input to our new files list
        e.target.files = dataTransfer.files;
        // dump the files to the console
//         console.log("After compression", e.target.files);
        console.log("After compression", e.target.files[0].size);
        document.getElementById('after').src = URL.createObjectURL(e.target.files[0]);
    });
</script>