image crop and upload

 

<style type="text/css">
    .image-image-cropper {
        display: block;
        max-width: 80%;
    }
    .modal-lg{
        max-width: 1000px !important;
    }
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" integrity="sha256-jKV9n9bkk/CTP8zbtEtnKaKf+ehRovOYeKoyfthwbC8=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js" integrity="sha256-CgvH7sz3tHhkiVKh05kSUgG97YtzYNnWt6OXcmYzqHY=" crossorigin="anonymous"></script>
<input type="file" id="inputfile" name="image" class="image" style="display: none;">
<img id ="img-src" class="upload-btn img-circle img-src1" src="@if(!empty($userDetails->vProfilePic)){{ asset("public/upload/$userDetails->vProfilePic") }}@else{{ asset('public/backend/images/user1.png') }}@endif"  alt="" >
<script type="text/javascript">
    jQuery(document).ready(function(){
        $(".upload-btn").click(function(){
            $("#inputfile").click();
        });
    });

    var $modal = $('#modal');
    var image = document.getElementById('image');
    var cropper;

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

    $modal.on('shown.bs.modal', function () {
        cropper = new Cropper(image, {
            dragMode: 'move',
            aspectRatio: 12 / 15,
            viewMode: 1,
            preview: '.preview',
            autoCropArea: 0.80,
            restore: false,
            guides: false,
            center: false,
            highlight: false,
            cropBoxMovable: false,
            cropBoxResizable: false,
            toggleDragModeOnDblclick: false,
        });
    }).on('hidden.bs.modal', function () {
        cropper.destroy();
        cropper = null;
    });

    $("#crop").click(function(){
        canvas = cropper.getCroppedCanvas({
            width: 160,
            height: 160,
        });

        canvas.toBlob(function(blob) {
            url = URL.createObjectURL(blob);
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function() {
                var base64data = reader.result;
                $('#img-src').attr('src', reader.result);
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "{{ route('profile-image') }}",
                    data: {'_token': '{{ csrf_token() }}', 'image': base64data, 'iUserId': '{{ $admin->iUserId }}'},
                    success: function(data){
                        $modal.modal('hide');
                        // alert("success upload image");
                    }
                });
            }
        });
    });
</script>
Route::post('backend/profile/image-upload','Backend\UserController@uploadImage')->name('profile-image');
public function uploadImage(Request $request)
{
    $folderPath = public_path('upload/');

    $image_parts = explode(";base64,", $request->image);
    $image_type_aux = explode("image/", $image_parts[0]);
    $image_type = $image_type_aux[1];
    $image_base64 = base64_decode($image_parts[1]);
    $vLogoImage = uniqid() . '.png';
    $file = $folderPath . $vLogoImage;

    file_put_contents($file, $image_base64);
    
    return response()->json(['success'=>'success']);
}