Croppie结果要发送到web服务器

Question

有人能帮我吗？我不太精通JavaScript，我已经一遍又一遍地阅读了文档，并在这里查看了很多帖子，还用谷歌搜索了这个问题。我无法获取裁剪后的结果并将其发送到我的web服务器。这是我的密码。

HTML:

<form action="" method="post" enctype="multipart/form-data" id="formTest">
<div id="modal">
<div id="main-cropper"></div>
<a class="button actionUpload">
<span>Upload</span>
<input type="file" id="upload" value="Choose Image" 
accept="image/*" name="imgf">
</a>
<button class="actionDone">Done</button>
<button class="actionCancel">Cancel</button>
</div>
</form>

JS:

<script>
var basic = $('#main-cropper').croppie({
viewport: { width: 300, height: 400, type: 'square' },
boundary: { width: 700, height: 500 },
showZoomer: true
});
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#main-cropper').croppie('bind', {
url: e.target.result
});
$('.actionDone').toggle();
$('.actionUpload').toggle();
}
reader.readAsDataURL(input.files[0]);
}
}
$('.actionUpload input').on('change', function () { readFile(this); });
$('.actionDone').on('click', function(){

$('#main-cropper').croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (resp) {
$('#formTest').find('name=["imgf"]').val('src', resp);
});
$('.actionDone').toggle();
$('.actionUpload').toggle();
});
</script>

Answer 1

我做了一些额外的研究，并通过使用AJAX找到了一个解决方案。我试过了，效果很好。需要对CSS进行一些清理，但这没什么大不了的。以下是一些修改后的代码：

部分JavaScript:

$('.crop_image').click(function(event){
image_crop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(response){
$.ajax({
url:"upload.php",
type: "POST",
data:{"image": response},
success:function(data)
{
$('#uploadimageModal').modal('hide');
$('#uploaded_image').html(data);
}
});
})
});

AJAX：

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("pg/$imageName", $data);
echo '<img src="'.$imageName.'" class="img-thumbnail" />';
}

https://www.webslesson.info/2018/03/image-crop-and-upload-using-jquery-with-php-ajax.html