JCrop和PHPGD返回带有黑色条的图像

请帮帮我,这快把我逼疯了。

因此,我使用的是JCrop的最新版本和JQuery的最新版。

我的目标是允许用户上传大于550x550px的图像,然后选择一个不大于550x825px的正方形或纵向图像。

我的实现是将上传的图像调整为550x550+或550+x550的文件,具体取决于原始上传的x或y是否更大。 当新图像存储在我的服务器上时,此代码工作得非常好。

我遇到的问题是,当调用裁剪代码时,除非裁剪选择的起始坐标为[0,0],否则返回的图像将向上移动,似乎与起始坐标成比例,图像的其余部分将是黑色空间。 我试图包含一些图片来演示,但由于我还是一个新手,所以不被允许。 我会尝试用语言来演示。 当尺寸为[550,828]的图像以[0,0]的起始字母裁剪时,裁剪成功。 当以[0100]左右开始的坐标裁剪同一图像时,裁剪失败。选择显示为~90%,向上移动~10%,其余~10%为黑色 当以[0278]左右开始的坐标裁剪同一图像时,裁剪失败。选择显示为~50%,向上移动~50%,其余~50%为黑色

此外,我检查了JCrop返回的坐标,它们是正确的。

这是我用来初始化JCrop的Javascript var目标_W=550; var TARGET_H=825; //更改裁剪的照片源 jQuery(“#cropbox”)。属性('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]);

下面是将单词发送到PHP的Javascript函数

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返回的坐标不准确,即使这些值看起来是正确的?