Croppie JS使用jquery将裁剪函数和上传函数分离

Question

我已经得到了这个工作代码，但我想调整一些东西，我想把裁剪和上传分开，但问题是我不知道如何在点击裁剪按钮时获得裁剪后的图像结果，然后在点击上传按钮时用它在我的upload.php上发送。

我已经尝试过搜索和我相同的问题，所以我不需要在这里发布问题，也不需要麻烦任何人，但仍然没有运气。我也阅读了文档，但我仍然不知道该怎么办。请帮助我困在这里。。谢谢

**这是我的JSfiddle**

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

**这是我的上传.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

试试这个：

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