Javascript 如何使用form post发送裁剪图像

如何处理裁剪后的图像并随邮件发送？我正在使用图书馆。HTML代码已经存在于表单元素中。这些代码是从示例管理模板复制的。裁剪工作，但我不能发送文件

HTML:

PHP:

后期输出：

---

首先将其作为一个

画布来执行，然后获取base64字符串
toDataURL（“image/png”）
然后在服务器端捕获它，并使用base64字符串再次将其转换为image

请看一下这篇文章。
php部分在哪里？我也有同样的问题，您找到解决方案了吗？还是直接使用
<div class="row">
<div class="col-md-6">
    <div class="image-crop">
        <img src="{{ asset('backend/images/image-upload.png') }}">
    </div>
</div>
<div class="col-md-6">
    <h4>Preview image</h4>
    <div class="img-preview img-preview-sm" style="width: 180px;height:180px;"></div>
    <hr>
    <div class="btn-group">
        <button class="btn btn-white" id="zoomIn" type="button">Zoom In</button>
        <button class="btn btn-white" id="zoomOut" type="button">Zoom Out</button>
        <button class="btn btn-white" id="rotateLeft" type="button">Rotate Left</button>
        <button class="btn btn-white" id="rotateRight" type="button">Rotate Right</button>
    </div>
    <hr>
    <div class="btn-group">
        <label title="Upload image file" for="inputImage" class="btn btn-primary">
            <input type="file" accept="image/*" name="file" id="inputImage" class="hide">
            Upload new image
        </label>
        <label title="Donload image" id="download" class="btn btn-primary">Download</label>
    </div>


</div>

var $image = $(".image-crop > img")
$($image).cropper({
    aspectRatio: 1,
    preview: ".img-preview",
    done: function(data) {
        // Output the result data for cropping image.


    }
});

var $inputImage = $("#inputImage");
if (window.FileReader) {
    $inputImage.change(function() {
        var fileReader = new FileReader(),
                files = this.files,
                file;

        if (!files.length) {
            return;
        }

        file = files[0];

        if (/^image\/\w+$/.test(file.type)) {
            fileReader.readAsDataURL(file);
            fileReader.onload = function () {
                $inputImage.val("");
                $image.cropper("reset", true).cropper("replace", this.result);
            };
        } else {
            alert("Please upload a image file");
        }
    });
} else {
    $inputImage.addClass("hide");
}


//Disabled Cropped Image Download
/*
$("#download").click(function() {
    window.open($image.cropper("getDataURL"));
});
*/

var_dump($_FILES);