Using Cropper.js with only javascript, my below script codes are conflicting with each other

I'm trying to make a custom mockup generator. Below this script code, I can mockup in the browser without using ajax or something else. But when I try to integrate this with cropper.js it's trying to save the picture in the project folder with ajax I guess.

What I want to achieve is having only one script code in the page, and after selecting a picture I want it to crop it in the opening modal, then the picture will be placed to where it belongs(this is being set by script code).

I thank you in advance for your help.

Cropper.js Script Codes:

    <script>
        var $modal = $('#modal');
        var image = document.getElementById('imageLoader');
        var cropper;

        $("body").on("change", "#imageLoader", 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, {
            aspectRatio: 1,
            viewMode: 3,
            preview: '.preview'
            });
        }).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;

                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "upload.php",
                        data: {image: base64data},
                        success: function(data){
                            console.log(data);
                            $modal.modal('hide');
                            alert("success upload image");
                        }
                      });
                 }
            });
        })
    </script>

Mockuping Codes (This comes second in the file as well)

<script type="text/javascript">

        var imageLoader = document.getElementById("imageLoader");
        imageLoader.addEventListener("change", handleImage, false);
        var canvas = document.getElementById("imageCanvas");
        var ctx = canvas.getContext("2d");
        function handleImage(e) {
        var reader = new FileReader();
        reader.onload = function(event) {
            var img = new Image();
            img.crossOrigin = "*";
            img.onload = function() {
            canvas.width = 678;
            canvas.height = 490;
            ctx.drawImage(img, 87, 21, 505, 317);

            var wm = new Image();
            wm.crossOrigin = "*";
            wm.onload = function() {
              document.querySelector('#imgplaceholder').style.display = 'none';
              ctx.drawImage(this, 0, 0, 678, 490);
              var base64 = canvas.toDataURL("image/png");
              var fileToSave = new Image();
              fileToSave.onload = function() {
                document.getElementById("img_div").appendChild(this);
              };
              fileToSave.src = base64;
            };
            wm.src =
              "../devices/computer.png";
          };
          img.src = event.target.result;
        };
        reader.readAsDataURL(e.target.files[0]);
      }
    </script>

I edited code and fixed it.

Here is the final code that crop image before uploading than mockuping in png.

    <script>
        $(document).ready(function(){
                var $modal = $('#modal');

                var image = document.getElementById('sample_image');

                var cropper;

                $('#imageLoader').change(function(event){
                    var files = event.target.files;

                    var done = function(url){
                        image.src = url;
                        $modal.modal('show');
                    };

                    //if this condition is true: user has selected file
                    if(files && files.length >0)
                    {
                        reader = new FileReader();
                        reader.onload = function(event)
                        {
                            done(reader.result);
                        };
                        reader.readAsDataURL(files[0]);
                    }
                });


                $modal.on('shown.bs.modal', function(){
                    //when modal pop up on web page, than this code block will execude
                    cropper = new Cropper(image, {
                        viewMode: 1,
                        aspectRatio: 1.383,
                        preview: '.preview'
                    });
                }).on('hidden.bs.modal', function(){
                        //when modal remove from web page, this code block will execute
                        cropper.destroy();
                        cropper = null;
                });

                //When we click on crop button, this code block will execute
                $('#crop').click(function(){
                    canvas = cropper.getCroppedCanvas({
                        width: 400,
                        height: 400
                    });


                    canvas.toBlob(function(blob){
                        url = URL.createObjectURL(blob);
                        var reader = new FileReader();
                        reader.readAsDataURL(blob);
                        reader.onloadend = function(){
                            var base64data = reader.result;
                            $modal.modal('hide');

                            var showcanvas = document.getElementById("imageCanvas");
                            var ctx = showcanvas.getContext("2d");
                            var img = new Image();
                                img.crossOrigin = "*";
                                img.onload = function() {
                                showcanvas.width = 678;
                                showcanvas.height = 490;
                                ctx.drawImage(img, 87, 21, 505, 317);

                                var wm = new Image();
                                wm.crossOrigin = "*";
                                wm.onload = function() {
                                    document.querySelector('#imgplaceholder').style.display = 'none';
                                    ctx.drawImage(this, 0, 0, 678, 490);
                                    var base64 = showcanvas.toDataURL("image/png");
                                    var fileToSave = new Image();
                                    fileToSave.onload = function() {
                                        document.getElementById("img_div").appendChild(this);
                                    };
                                    fileToSave.src = base64;
                                };
                                wm.src =
                                    "../devices/computer.png";
                            };
                            img.src = event.target.result;
                        };
                    });

                });


        });
    </script>