JSFiddle - React, Tailwind, and code Playground

by Motalib_Hossain

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.css">
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/cropper.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <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">
        ...

CSS

.page {
    margin: 1em auto;
    max-width: 768px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    height: 100%;
}

.box {
    padding: 0.5em;
    width: 100%;
    margin: 0.5em;
}

.box-2 {
    padding: 0.5em;
    width: calc(100% / 2 - 1em);
}

.options label,
.options input {
    width: 4em;
    padding: 0.5em 1em;
}
/* .btn {
    background: white;
    color: black;
    border: 1px solid black;
    padding: 10px;
    text-decoration: none;
    margin: 0.8em 0.3em;
    display: inline-block;
    cursor: pointer;
} */

.hide {
    display: none;
}

img {
    max-width: 100%;
}

JavaScript

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");
});