Question

我已经有了此工作代码，但是我想进行一些调整，以便将“裁剪”和“上传”分开，但问题是，当我单击“裁剪”按钮然后使用它发送时，我不知道如何获得裁剪后的图像结果在我的upload.php上，点击了“上传”按钮。

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

**这是我的JSfiddle **

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

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

尝试一下：

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

     }
}

Croppie JS使用jQuery将作物功能和上传功能分开

1 个答案: