仅将 Cropper.js 与 javascript 一起使用，我的以下脚本代码相互冲突

Question

我正在尝试制作自定义模型生成器。在这个脚本代码下面，我可以在浏览器中制作模型，而无需使用 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>

模型代码（这在文件中也排在第二位）

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

Answer 1

我编辑并修复了代码。

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

仅将 Cropper.js 与 javascript 一起使用，我的以下脚本代码相互冲突

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

javascript

jquery

html5-canvas

cropper

cropperjs