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

//////////////////////////////////////////////////////////////////////////////////////// HERE IS MY INDEX.PHP////////////////////

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

//////////////////////////////////////////////////////////////////////////////////// HERE IS MY UPLOAD.PHP////////////////////

<?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" />';

}

?>