上传裁剪后的图像不起作用 CropperJs

如何解决上传裁剪后的图像不起作用 CropperJs

我有 2 个问题，我正在编写一个 javascript 脚本，其中包含以下代码

<script type="text/javascript" >
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#imageId').attr('src',e.target.result)
                };
                reader.readAsDataURL(input.files[0]);
                setTimeout(initCropper,1000);
            }
        }
        function initCropper(){
            var image = document.getElementById('blah');
            var cropper = new Cropper(image,{
              aspectRatio: 1 / 1,crop: function(e) {
                console.log(e.detail.x);
                console.log(e.detail.y);
              }
            });
    
            // On crop button clicked
            document.getElementById('crop_button').addEventListener('click',function(){
                var imgurl =  cropper.getCroppedCanvas().toDataURL();
                var img = document.createElement("img");
                img.src = imgurl;
                document.getElementById("cropped_result").appendChild(img);
    
                //sending cropped image to server
    
                    cropper.getCroppedCanvas().toBlob(function (blob) {
                          var formData = new FormData();
                          formData.append('croppedImage',blob);
                          // Use `jQuery.ajax` method
                          path = 'C:/Users/Andy/Desktop/javascript/croppingwcropperjs/uploads';
                          $.ajax(path,{
                            method: "POST",data: formData,processData: false,contentType: false,success: function () {
                              console.log('Upload success');
                            },error: function () {
                              console.log('Upload error');
                            }
                          });
                    });
              
            })
        }
    </script>

这是它的html部分

<! DOCTYPE html>
<html>
<head>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script name="jquery-croper-script">
        !function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(require("jquery"),require("cropperjs")):"function"==typeof define&&define.amd?define(["jquery","cropperjs"],r):r(e.jQuery,e.Cropper)}(this,function(c,s){"use strict";if(c=c&&c.hasOwnProperty("default")?c.default:c,s=s&&s.hasOwnProperty("default")?s.default:s,c.fn){var e=c.fn.cropper,d="cropper";c.fn.cropper=function(p){for(var e=arguments.length,a=Array(1<e?e-1:0),r=1;r<e;r++)a[r-1]=arguments[r];var u=void 0;return this.each(function(e,r){var t=c(r),n="destroy"===p,o=t.data(d);if(!o){if(n)return;var f=c.extend({},t.data(),c.isPlainObject(p)&&p);o=new s(r,f),t.data(d,o)}if("string"==typeof p){var i=o[p];c.isFunction(i)&&((u=i.apply(o,a))===o&&(u=void 0),n&&t.removeData(d))}}),void 0!==u?u:this},c.fn.cropper.Constructor=s,c.fn.cropper.setDefaults=s.setDefaults,c.fn.cropper.noConflict=function(){return c.fn.cropper=e,this}}});
        </script>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.min.css" />

    </head>
<body>
    <input type="file" name="image" id="image" onchange="readURL(this);"/>
    <div class="image_container">
        <img id="imageId" src="#" alt="your image" />
    </div>
    <div id="cropped_result"></div>        
    <button id="crop_button">Crop</button>
</body>
</html>

好的。使用上面的代码，我打算裁剪图像并将裁剪后的版本保存在我名为 uploads 的文件夹中。我设法裁剪了图像，但是我无法保存裁剪后的图像。我的问题是：

为了将裁剪后的图像成功提交到上传文件夹中，路径格式应该是什么？
我已经看到一些人为路径创建了一个 PHP 脚本，比如 uploads.PHP 是否必须让路径成为 PHP 中的脚本。