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

Posted 2023-03-25

【中文标题】仅使用带有 javascript 的 Cropper.js，我的以下脚本代码相互冲突

【英文标题】：Using Cropper.js with only javascript, my below script codes are conflicting with each other

【发布时间】：2021-10-01 23:45:12

【问题描述】：

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

【参考方案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>