仅使用带有 javascript 的 Cropper.js，我下面的脚本代码相互冲突

如何解决仅使用带有 javascript 的 Cropper.js，我下面的脚本代码相互冲突

我正在尝试制作自定义模型生成器。 在此脚本代码下方，我可以在浏览器中进行模型制作，而无需使用 ajax 或其他东西。 但是，当我尝试将其与cropper.js 集成时，它正在尝试使用ajax 将图片保存在项目文件夹中。

我想要实现的是页面中只有一个脚本代码，并且选择一张图片后 我希望它在打开模式中裁剪它，然后图片将被放置到它所属的位置（这是由脚本代码设置的）。

我提前感谢您的帮助。

Cropper.js 脚本代码：

    <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（这也是文件中的第二个）

<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,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>

解决方法

我编辑了代码并修复了它。

这是在上传之前裁剪图像而不是在 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,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>