Crop Image

CONTROLLER
public function store(Request $request){
    $data = new Profile;
          
    for UPDATE
    if($request->hasfile('image')) {
        $destination = 'images/users/'.$data->image;
        if(File::exists($destination)){ File::delete($destination); }
    }
          
    $data->image = $this->storeBase64($request->image_base64);
    $data->save();
    return back()->with('success', 'Image uploaded successfully.');
}
private function storeBase64($imageBase64){
    list($type, $imageBase64) = explode(';', $imageBase64);
    list(, $imageBase64)      = explode(',', $imageBase64);
    $imageBase64 = base64_decode($imageBase64);
    $imageName= time().'.png';
    $path = public_path() . "/images/users/" . $imageName;
    file_put_contents($path, $imageBase64);
    return $imageName;
}
BLADE

CSS
--------------------
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css"/>
    <style type="text/css">
        img {
            display: block;
            max-width: 100%;
        }
        .preview {
            text-align: center;
            overflow: hidden;
            width: 160px;
            height: 160px;
            margin: 10px;
            border: 1px solid red;
        }
    </style>

BODY
--------------------
    <div class="container pt-5">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <form action="{{ url('/store') }}" method="POST" class="form-control">
                    @csrf
                    <label for="image">Image*</label>
                    <input type="file" name="image" class="image form-control" required>
                    <input type="hidden" name="image_base64">
                    <img src="" style="width: 200px;display: none;" class="show-image">
                    <br/>
                    <button class="btn btn-success">Submit</button>
                </form>
            </div>
        </div>
    </div>

JS
--------------------
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
    <script>
        var $modal = $('#modal');
        var image = document.getElementById('image');
        var cropper;

/*------------------------------------------
        --------------------------------------------
        Image Change Event
        --------------------------------------------
        --------------------------------------------*/
        $("body").on("change", ".image", function(e){
            var files = e.target.files;
            var done = function (url) {
                image.src = url;
                $modal.modal('show');
            };

var reader;
            var file;
            var url;

if (files && files.length > 0) {
                file = files[0];

if (URL) {
                    done(URL.createObjectURL(file));
                } else if (FileReader) {
                    reader = new FileReader();
                    reader.onload = function (e) {
                        done(reader.result);
                    };
                reader.readAsDataURL(file);
                }
            }
        });

/*------------------------------------------
        --------------------------------------------
        Show Model Event
        --------------------------------------------
        --------------------------------------------*/
        $modal.on('shown.bs.modal', function () {
            cropper = new Cropper(image, {
                aspectRatio: 1,
                viewMode: 3,
                preview: '.preview'
            });
        }).on('hidden.bs.modal', function () {
            cropper.destroy();
            cropper = null;
        });

/*------------------------------------------
        --------------------------------------------
        Crop Button Click Event
        --------------------------------------------
        --------------------------------------------*/
        $("#crop").click(function(){
            canvas = cropper.getCroppedCanvas({
                width: 500,
                height: 500,
            });

canvas.toBlob(function(blob) {
                url = URL.createObjectURL(blob);
                var reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onloadend = function() {
                    var base64data = reader.result;
                    $("input[name='image_base64']").val(base64data);
                    $(".show-image").show();
                    $(".show-image").attr("src",base64data);
                    $("#modal").modal('toggle');
                }
            });
        });

</script>