Question

请帮帮我，这让我疯了。

所以我使用的是最新版本的JCrop以及最新版本的JQuery。

我的目标是允许用户上传大于550x550像素的图片，然后选择方形或纵向不超过550x825像素的图片。

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

我遇到的问题是当调用裁剪代码时，除非裁剪选区的起始坐标为[0,0]，否则返回的图像将向上移动，看起来与起始坐标成比例，图像的其余部分将是黑色空间。我试图包括图像来演示，但不允许，因为我还是网站的新手。我会尝试用文字演示。当用[0,0]的起始比例裁剪尺寸为[550,828]的图像时，作物成功。当用约为[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]);

这是将代码发送到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返回的坐标不准确，即使值似乎正确吗？

Answer 1

您可能想要查看imagecopyresampled http://php.net/manual/en/function.imagecopyresampled.php

如果你是用gif和png创建的，你可能需要额外的选项，比如colorallocate

我的想法是你调整图像大小并用正确的像素填充这个图像，这样gd就不需要用黑色像素（黑条）来完成图像。

希望这有帮助。

Answer 2

为了它的价值，我设法解决了自己的问题。

问题是，当我使用imagejpeg / imagepng输出最终文件时，我覆盖了原始文件。我将输出更改为$ src +'_ cropped'，现在它正常工作。

我真的不明白为什么这是一个问题。但无论如何，它有效。

JCrop和PHP GD返回带有黑条的图像

2 个答案: