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

68
July 28, 2021, at 12:10 PM

I'am trying to make a custom mockup generator. With 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 its trying to save the picture in project folder with ajax i guess.

What i want to achive 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 picture will be placed to where its 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 is 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>
READ ALSO
React + Electron + Typescript - Pass defaultValue prop to JSX Input Element using data fetched asynchronously (Promise)

React + Electron + Typescript - Pass defaultValue prop to JSX Input Element using data fetched asynchronously (Promise)

I have what is meant to be a settings menu component, and I am attempting to read from a JSON file located in the app data directoryFor this persistent data storage, I'm using electron-store@^8

68
Can i deduct that either thumb pressed or finger pressed in android screen programmatically?

Can i deduct that either thumb pressed or finger pressed in android screen programmatically?

i started working as android developerI want to gesture that when someone press on screen, its thumb or finger

89
Sequelize transaction - save transaction to commit in the next request

Sequelize transaction - save transaction to commit in the next request

I'm working with a feature to bulk upload more than 1000 users to DB Many insertions have to be done in different tables for each user

149
CSS Custom property Url isn&#39;t working in Asp .Net

CSS Custom property Url isn't working in Asp .Net

I'm trying to style some cards in an mvc project and i have a custom property(variable) in my css "--bg-img" file as shown :

93