How to send cropped image with form post

Question

How can I handle cropped image and send with post? I am using Cropper.js library. The HTML codes already in a form element. These codes copied from sample admin template. Cropping works but I cant send files.

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

Post Output:

I have the same issue, did you find any solution? – Edward May 08 '17 at 11:01 — Edward, May 08 '17 at 11:01

score 0 · Answer 1 · edited May 23 '17 at 12:26

0

you do it as a canvas first and get the base64 string toDataURL("image/png") then catch it in your server side and convert it to image again using the base64 string

kindly take a look at this post. Convert an image into binary data in javascript

edited May 23 '17 at 12:26

Community

1
1

answered Nov 02 '16 at 07:00

Jeric Cruz

1,899
1
14
29

or just use [canvas.toBlob](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) directly – Endless Nov 02 '16 at 11:04

How to send cropped image with form post

1 Answers1