How to use cropped image using croppie js to php and use it?

Question

I am trying to create image overlay app, which will add water mark to an uploaded image. I have done my image overlay app using this tutorial, now I need to add a cropping feature using croppie.js. I want to pass the output of the croppie js to this php.

<?php

# Check to see if the form has been submitted or not:
if( !isset( $_POST['submit'] ) ){

    # Form has not been submitted, show our uploader form and stop the script
    require_once( "uploader.html" );
    exit();

}else{

    # Form has been submitted, begin processing data

    # Include the function file then call it with the uploaded picture:
    # TIP: The "../../ portion is a relative path. You will need to change this
    #      path to fit your website's directory structure.
    require_once( 'FacebookPicOverlay.php' );

    # Create the FacebookTagger object using our upload value given to us by uploader.html
    $fbt = new FacebookPicOverlay();

    # Let's say we're using this script to do an image overlay. Let's invoke the
    # overlay method, which will then return the image file relative to the resources
    # folder (ex: will return resources/processed/imagename.jpg).
    try {
        $image = $fbt->overlay( $_FILES['picture_upload'] );
    }catch( Exception $e ){
        print( "<b>Oops!</b> " . $e->getMessage() );
        print( "<br /><br /><a href=\"javascript:history.go(-1)\">Please go back and try again</a>" );
        exit();
    }

    # This will delete all images created more than two days ago (by default).
    # This is helpful in keeping our processed folder at a reasonable file size.
    $fbt->maintenance();

    require_once( "success.html" );

}   

# That's all, folks!
?>

Please help me out with uploader form. Thanks

There is no form and barely any code. After cropping, can you get the data out as a blob (like, with `canvas.getImageData`) and then pass to php to process it? Thats all you need to do, but the code provided really tells us nothing. — somethinghere, Oct 31 '16 at 08:35

score 1 · Accepted Answer · edited May 23 '17 at 11:48

I'm using croppie too and I get the data from the Base64 code information displayed in the image preview.

Example:

JQuery:

var uploadCrop;
function readFile(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            uploadCrop.croppie("bind", { url: e.target.result });
            $("#upload-preview").addClass("ready");
        }
        reader.readAsDataURL(input.files[0]);
    }
}

var w = $(window).width(), h = $(window).height();

console.log('window width: ' + w);
console.log('window height: ' + h);
if (w < 400) var wCalc = 25;
else if (w < 350) var wCalc = 50;
else if (w < 300) var wCalc = 75;
else var wCalc = 0;

var uploadCrop = $("#upload-preview").croppie({
    setZoom: 1.0,
    enableOrientation: true,
    quality: 1,
    viewport: {
        width: 250-wCalc,
        height: 250-wCalc,
        type: "circle"
    },
    boundary: {
        width: 320-wCalc,
        height: 320-wCalc
    },
    exif: true
});
$("#upload").on("change", function () {
    readFile(this);
});
function output(node) {
var existing = $("#result .croppie-result");
    if (existing.length > 0) {
    existing[0].parentNode.replaceChild(node, existing[0]);
    } else {
    $("#result")[0].appendChild(node);
    }
}
function popupResult(result) {
    var html;
    if (result.html) {
        html = result.html;
    }
    if (result.src) {
        $("#result").html("<img id=\"canvas\" src=\"" + result.src + "\" />");
    }
}

HTML:

<span class="btn btn-grey btn-file">
    <input id="upload" name="file_data" type="file" accept="image/*" /> Browse
</span>

</div>
    <div class="container">
        <div id="upload-preview" class="mt30 mb35"></div>
    </div>
</div>

Now this is the part where you handle the click event and store the image information in resp:

$('body').on('click', '.ajax-post', function (e) {
    e.preventDefault();
    thisVar = $(this);
    var img_width = $('.cr-image').attr('width');

    if (img_width) {
        // Image Base64
        uploadCrop.croppie("result", {type: "canvas", size: {width: 600, height: 600}}).then(function (resp) {
            popupResult({src: resp});
            saveAjax(thisVar, resp);
        });
    } else {
        saveAjax(thisVar);
    }
});

saveAjax is my own function to handle ajax requests. You just have to pass resp which contains the image information or write that ajax request in the function itself.

More about this method and topic: How to display Base64 images in HTML?

thanks for ur help! But how to pass this to my uploader.php that i mentioned above. I am totally new to php development thats y!! Thanks a lot for your help — Durai Sankar, Nov 01 '16 at 05:50

How to use cropped image using croppie js to php and use it?

1 Answers1