Croppie JS separate crop function and upload function using jquery

Question

I already got this working codes, but i want to adjust something i want to separate the Cropping and Uploading but the problem i don't know how to get the cropped image result when i clicked the crop button then used it to send on my upload.php when upload button was clicked.

i already tried search for same problem as me so i dont need to post a question here and bother anyone but still no luck i also read the documentation but i still dont know what to do. Please help im stuck here.. Thank you

** This is my JSfiddle **

https://jsfiddle.net/eds_gavino/n34ybcwm/11/

** This is my upload.php**

//upload.php

if(isset($_POST["image"]))
{
    $data = $_POST["image"];
    $image_array_1 = explode(";", $data);
    $image_array_2 = explode(",", $image_array_1[1]);
    $data = base64_decode($image_array_2[1]);
    $imageName = time() . '.png';
    file_put_contents($imageName, $data);
    echo '<img src="'.$imageName.'" class="img-thumbnail" />';
}
?>

Answer 1

Try this :

$data = filter_input(INPUT_POST, 'image', FILTER_SANITIZE_STRING);

if($data) {

    $splited = explode(',', substr( $data , 5 ) , 2);
    $mime=$splited[0]; 
    $data=$splited[1]; 

    $mime_split_without_base64 = explode(';', $mime,2);
    $mime_split = explode('/', $mime_split_without_base64[0],2);
    if(count($mime_split) == 2)
    {
        $extension = $mime_split[1]; 

        // change png to jpg if required
        $extension = 'jpg';

        $new_file_name = 'avatar.'.$extension; // create new file avatar.jpg

        $directory = $_SERVER['DOCUMENT_ROOT'].'/upload/'; // directory upload in root document

        file_put_contents( $directory.$new_file_name, base64_decode($data) );

     }
}