Javascript 使用Cropit和表单提交时图像损坏

我最近被介绍到Cropit，发现它真的很容易使用，但我被困在一个地方。我正在尝试使用Cropit和表单提交。我正在关注Cropit提供的演示

Javascript:

$('form').submit(function() {
     // Move cropped image data to hidden input
     var imageData = $('.image-editor').cropit('export');
     $('.hidden-image-data').val(imageData);
     // Print HTTP request params
     var formValue = $(this).serialize();
     $('#result-data').text(formValue);
     // Prevent the form from actually submitting
     return false;
});

PHP:

它可以将文件输出到我的文件夹中，但图片只是一个带有我设置的尺寸的空白屏幕

我试着在网上搜索，但找不到任何解决问题的方法。 希望能从任何遇到或知道解决方案的人那里得到帮助

$encoded = $base64_string;
$decoded = urldecode($encoded);
$image_name = explode(';', $decoded);
$image_name = explode(':', $image_name[0]);
$image = array_pop($image_name);
$ext = explode('/', $image);

//decode the url, because we want to use decoded characters to use explode
$decoded = urldecode($encoded);

//explode at ',' - the last part should be the encoded image now
$exp = explode(',', $decoded);
//we just get the last element with array_pop
$base64 = array_pop($exp);

//decode the image and finally save it
$data = base64_decode($base64);

$str = random_string('alnum', 8);
$file = $str.'.'.$ext[1];
$data = $upload;

file_put_contents('assets/image_test/cropped/'.$file, $data);