Firstly, I take input of an image file through an HTML input type file. Then I open the image in a modal form and crop the image using the Cropper js plugin.
And now I want to compress my crop image.
Help me to do how can I compress my cropped image.
Here, is my image cropping code.
My demo project

    <main class="page">
        <h2>Upload ,Crop and save.</h2>
        <!-- input file -->
        <div class="box">
            <input type="file" id="file-input" class="image pview">
        </div>
        <!-- Showing here my crop image  -->
        <h4>Crop image is here</h4>
        <div class="box-2">
            <div class="result" id="root">
                <img  id="show_crop_image" alt="">
            </div>
        </div>

        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
            <div class="modal-dialog modal-md" role="document">
                <div class="modal-content">
                    <div class="modal-header py-2">
                        <h5 class="modal-title" id="modalLabel">Crop image</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="img-container">
                            <div class="row">
                                <img id="Crop_image">
                                <div class="col-md-8">
                                </div>
                                <div class="col-md-4">
                                    <div class="preview"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer py-1 pr-0">
                        <button type="button" class="btn btn-secondary m-2" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary m-2" id="crop">Crop</button>
                    </div>
                </div>
            </div>
        </div>

    </main>

js code

let cropper = "";

var minCroppedWidth = 100;
var minCroppedHeight = 100;
var maxCroppedWidth = 450;
var maxCroppedHeight = 450;

// modal open
var bs_modal = $("#modal");
var image = document.getElementById("Crop_image");
var reader, file;

$("body").on("change", ".image", function (e) {
    var files = e.target.files;
    var modalImage = function (url) {
        image.src = url;
        bs_modal.modal("show");
    };

    if (files && files.length > 0) {
        file = files[0];
        if (URL) {
            modalImage(URL.createObjectURL(file));
        } else if (FileReader) {
            reader = new FileReader();
            reader.onload = function (e) {
                modalImage(reader.result);
            };
            reader.readAsDataURL("image/jpeg");
        }
    }
});

// Crop function
bs_modal
    .on("shown.bs.modal", function () {
        cropper = new Cropper(image, {
            aspectRatio: 1,
            viewMode: 3,
            crop: function (event) {
                var width = event.detail.width;
                var height = event.detail.height;

                cropper.setData({
                    width: Math.max(minCroppedWidth, Math.min(maxCroppedWidth, width)),
                    height: Math.max(minCroppedHeight, Math.min(maxCroppedHeight, height)),
                });
            },
            data: {
                width: 200,
                height: 200,
            },
        });
    })
    .on("hidden.bs.modal", function () {
        cropper.destroy();
        cropper = null;
    });

// When click crop button the crop the selected image
$("#crop").on("click", function (e) {
    e.preventDefault();
    let imgSrc = cropper.getCroppedCanvas({}).toDataURL("image/jpeg");
    $("#show_crop_image").attr("src", imgSrc);
    $("#modal").modal("hide");
});