javascript - 如何通过表单发送裁剪后的图像

Question

如何处理裁剪后的图像并通过邮件发送？我正在使用Cropper.js图书馆。 HTML 代码已在表单元素中。这些代码是从示例管理模板复制的。裁剪有效，但我无法发送文件。

HTML:

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

JS:

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"));
});
*/

PHP:

var_dump($_FILES);

发布输出:

Answer 1

首先将其作为canvas进行，并获取base64字符串toDataURL("image/png")，然后在服务器端捕获它并再次将其转换为图像使用base64字符串

请看一下这篇文章。 Convert an image into binary data in javascript