client_based_crop.js

        function dataURItoBlob(dataURI) {
            // convert base64/URLEncoded data component to raw binary data held in a string
            var byteString;
            if (dataURI.split(',')[0].indexOf('base64') >= 0)
                byteString = atob(dataURI.split(',')[1]);
            else
                byteString = unescape(dataURI.split(',')[1]);

            // separate out the mime component
            var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

            // write the bytes of the string to a typed array
            var ia = new Uint8Array(byteString.length);
            for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
            }

            return new Blob([ia], {
                type: mimeString
            });
        }

        $("#profile_photo_upload").change(function() {
            if (this.files && this.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#profile_photo_prew').attr('src', e.target.result);

                    let img = document.createElement("img");
                    img.id = "upload_img";
                    img.src = e.target.result;
                    img.classList.add("img-fluid");
                    img.classList.add("img-responsive");

                    img.style = "height: 512px";
                    Swal.fire({
                        title: "Profil Fotoğrafınızı Düzenleyin",
                        html: img.outerHTML,
                        showCloseButton: false,
                        showCancelButton: false,
                        showConfirmButton: true,
                        confirmButtonText: "Yükle",
                        didRender: function() {
                            window.croppr = new Croppr("#upload_img", {
                                aspectRatio: 1,
                                maxSize: [512, 512],
                            });
                        },
                    }).then((result) => {
                        Swal.showLoading();

                        if (!result.isConfirmed) return;

                        img = window.croppr;
                        let value = img.getValue();

                        let canvas = document.createElement("canvas");
                        canvas.width = value.width;
                        canvas.height = value.height;
                        let ctx = canvas.getContext("2d");
                        ctx.drawImage(img.imageEl, value.x, value.y, value.width, value.height, 0, 0, value.width, value.height);

                        let data = canvas.toDataURL("image/jpeg", 0.8);

                        let blob = dataURItoBlob(data);
                        let file = new File([blob], "profile_photo.jpg", {
                            type: "image/jpeg",
                            lastModified: Date.now()
                        });

                        let container = new DataTransfer();
                        container.items.add(file);

                        $("#profile_photo_upload")[0].files = container.files;

                        Swal.hideLoading();
                    });
                }

                reader.readAsDataURL(this.files[0]);
            }
        });