JCrop и PHP GD возвращают изображение с черной полосой

Пожалуйста, помогите мне, это сводит меня с ума.

Поэтому я использую последнюю версию JCrop вместе с последней версией JQuery.

Моя цель — разрешить пользователям загружать изображения размером более 550×550 пикселей, а затем выбирать квадрат или портрет размером не более 550×825 пикселей.

Моя реализация заключается в изменении размера загруженного изображения в файл размером 550×550 + или 550 + x550 в зависимости от того, был ли x или y больше при исходной загрузке.
Код для этого прекрасно работает, так как новое изображение хранится на моем сервере.

У меня проблема, когда код обрезки вызывается, если только начальные координаты выбора обрезки не равны [0,0], возвращаемое изображение будет смещено вверх, казалось бы, пропорционально начальным координатам, а остальная часть изображения будет черным пространством.
Я попытался включить изображения для демонстрации, но мне не разрешили, так как я все еще новичок на сайте.
Я постараюсь продемонстрировать словами.
Когда изображение с размерами [550, 828] было обрезано с начальными коэффициентами [0,0], обрезка прошла успешно.
Когда то же изображение было обрезано с координатами, начинающимися с [0, 100], обрезка была неудачной. Выделение отображалось ~ 90%, смещено вверх ~ 10%, а оставшиеся ~ 10% были черными
Когда то же изображение было обрезано с координатами, начинающимися около [0, 278], обрезка была неудачной. Выделение отображалось ~ 50%, смещено вверх ~ 50%, а оставшиеся ~ 50% были черными

Кроме того, я проверил координаты, которые возвращает JCrop, и они верны.

Вот мой Javascript для инициализации JCrop
var TARGET_W = 550;
var TARGET_H = 825;
// изменить источник фотографии для кадрирования
jQuery (‘# cropbox’). attr (‘src’, url [1]);

// Initialize the Jcrop using the TARGET_W and TARGET_H that initialized before
jQuery('#cropbox').Jcrop({
minSize : [TARGET_W, TARGET_W ],
maxSize : [TARGET_W, TARGET_H ],
setSelect: [TARGET_W, TARGET_W, 0, 0],
onSelect: updateCoords
});

// store the current uploaded photo url in a hidden input to use it later
jQuery('#photo_url').val(url[0]);
jQuery('#photo_src').val(url[1]);

Вот функция Javascript для отправки ком-ордов в PHP

function crop_photo() {
//declare co-ords
var x_ = jQuery('#x').val();
var y_ = jQuery('#y').val();
var w_ = jQuery('#w').val();
var h_ = jQuery('#h').val();
var photo_url_ = jQuery('#photo_url').val();
var photo_src_ = jQuery('#photo_src').val();

// crop photo with a php file using ajax call
jQuery.ajax({
url: ajaxurl,
type: 'POST',
data: {x:x_, y:y_, w:w_, h:h_, photo_url:photo_url_, photo_src:photo_src_},
success:function(data){
// display the croped photo
d = new Date();
jQuery("#featured-image-preview").attr("src", photo_src_ + "?timestamp=" + d.getTime());
jQuery('#featured_image').val(photo_src_);
jQuery('#featured_image_src').val(photo_url_);

jQuery('#recipe-details-form').show(500);
if (jQuery('#cropbox').data('Jcrop')) {
jQuery('#cropbox').data('Jcrop').destroy();
jQuery('#cropbox').removeAttr('style');
jQuery('#cropbox').removeAttr('src');
}
jQuery('.loading_progress_final').html('');
}
});

Вот мой PHP для урожая

//CROP IMAGE
if(isset($_POST['photo_url']) && !empty($_POST['photo_url'])) {
// quality
$jpeg_quality = 90;
$png_quality = 9;
// photo path
$src = $_POST['photo_url'];
$split_name = explode('.',$src);
if ($split_name[1] == 'jpg'){
// create new jpeg image based on the target sizes
$img_r = imagecreatefromjpeg($src);
$dst_r = imagecreatetruecolor($_POST['w'], $_POST['h']);
// crop photo
imagecopyresampled($dst_r,$img_r,0,0, (int)$_POST['x'], (int)$_POST['y'], (int)$_POST['w'], (int)$_POST['h'], (int)$_POST['w'], (int)$_POST['h']);
// create the physical photo
header('Content-type: image/jpeg');
imagejpeg($dst_r,$src,$jpeg_quality);
}
else if ($split_name[1] == 'png') {
// create new jpeg image based on the target sizes
$img_r = imagecreatefrompng($src);
$dst_r = ImageCreateTrueColor( (int)$_POST['w'], (int)$_POST['h'] );
// crop photo
imagecopyresampled($dst_r,$img_r,0,0, (int)$_POST['x'], (int)$_POST['y'], (int)$_POST['w'], (int)$_POST['h'], (int)$_POST['w'], (int)$_POST['h']);
// create the physical photo
imagepng($dst_r,$src,$png_quality);
}

//$src = resize_image($src, 550);
return $_POST['photo_src'];

Я использую стандартный ванильный Jcrop CSS за исключением следующего

.jcrop-holder img,
img.jcrop-preview,
.crop-wrapper img,
{
max-width: none !important;
max-height: none !important;
}
.jcrop-holder {
display: inline-block;
max-width: none !important;
max-height: none !important;
}

Причина этого заключается в том, что когда максимальная ширина установлена ​​на 100%, изображение предварительного просмотра действительно растягивается и не может быть легко отображено на экране, чтобы пользователь мог его обрезать.

Я посмотрел свой код 100 раз и не вижу никаких очевидных ошибок. И, как я уже упоминал, когда изображение обрезается из [0,0], оно отлично работает. Возможно, это проблема CSS, из-за которой координаты, возвращаемые JCrop, являются неточными, даже если значения кажутся правильными?