Why is the cropped image file size larger and with PNG compression than the original source image which began as JPG compression when using cropperJS?

Question

I am using cropper.js in my JavaScript/Django project. I got it working but I am finding that the cropped image file sizes are much larger than the source images, by like 10 times.

It appears the source JPG files are getting compressed as PNG when they are cropped. Why is this and how do I prevent this?

Here is my JS code where I am using cropper:

let img_data;
let cropper;

// Display image cropper ui when file is selected
add_image_input.addEventListener('change', () => {

    // Get image file object from input
    img_data = add_image_input.files[0]

    // Create a DOMString containing a URL representing the image file object
    const url = URL.createObjectURL(img_data)

    // Create an image tag in imagebox showing the uploaded image file using the url
    image_crop_box.innerHTML = `<img src="${url}" id="image" style="width:100%;">`

    // Assign the cropping view image in a variable
    const image = document.getElementById('image')

    // Create a cropper object with the cropping view image
    cropper = new Cropper(image, {
        aspectRatio: 1,
        autoCropArea: 1,
        dragMode: 'move',
        viewMode: 1,
        scalable: false,
        zoomable: true,
        movable: true,
        minCropBoxWidth: 175,
        minCropBoxHeight: 175,
        wheelZoomRatio: 0.2
    })
})

// Save the cropped image when the button is clicked
crop_and_save_button.addEventListener('click', () => {

    // Convert the cropped image on cropper canvas to blob object
    cropper.getCroppedCanvas().toBlob((blob)=>{
        // Get the original image data
        let original_image_input = add_image_input

        // Make a new cropped image file using that blob object with the same filename as the original
        let new_cropped_image_file = new File([blob], img_data.name,{type:"image/*", lastModified:new Date().getTime()});

        // Create a new container
        let container = new DataTransfer();

        // Add the cropped image file to the container
        container.items.add(new_cropped_image_file);

        // Replace the original image file with the new cropped image file
        original_image_input.files = container.files;

        let formData = new FormData()
        formData.append('image', new_cropped_image_file)

        fetch_add_image(tile[0].tile_id, formData)
    })
})

Here is the info comparison between the source and cropped images using IrfanView.

Answer 1

I believe I have fixed the issue by passing 'image/jpeg' to toBlob (ref):

// Convert the cropped image on cropper canvas to blob object
cropper.getCroppedCanvas().toBlob((blob)=>{
    // ...
        
}, 'image/jpeg');

The cropped image is now a smaller file size and I have verified the compression remains JPEG and not PNG. Not sure if this causes issues with other file types though, will have to test.