【发布时间】：2016-09-02 10:28:21
【问题描述】：
请帮帮我，这让我发疯了。
所以我正在使用最新版本的 JCrop 以及最新版本的 JQuery。
我的目标是允许用户上传大于 550x550 像素的图片，然后选择不大于 550x825 像素的方形或纵向选区。
我的实现是将上传的图像调整为 550x550+ 或 550+x550 的文件，具体取决于原始上传时 x 或 y 是否更大。 由于新图像存储在我的服务器上，因此代码运行良好。
我遇到的问题是，当调用裁剪代码时，除非裁剪选择的起始坐标为 [0,0]，否则返回的图像将向上移动，看起来与起始坐标成比例，而图像的其余部分将黑色空间。 我试图包含图像以进行演示，但由于我还是该站点的新手，因此不允许。 我会尝试用文字来演示。 当尺寸为 [550, 828] 的图像以 [0,0] 的起始坐标被裁剪时，裁剪成功。 当使用从 [0, 100] 左右开始的坐标裁剪相同的图像时，裁剪不成功。选择显示~90%，向上移动~10%，剩下的~10%是黑色的 当使用从 [0, 278] 左右开始的坐标裁剪相同的图像时，裁剪不成功。选择显示 ~50%，向上移动 ~50%，其余 ~50% 为黑色
此外，我检查了 JCrop 返回的坐标，它们是正确的。
这是我初始化 JCrop 的 Javascript var TARGET_W = 550； 变量 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'];
我使用的是标准的 vanilla 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 返回的坐标不准确，即使值看起来正确？
【问题讨论】：
-
你在 PHP 中得到的坐标是多少？我想我前段时间在编写代码以将图像从 16:9 转换为 4:3 时遇到了类似的问题，反之亦然。我认为这是因为一些带有负坐标的东西，并且玩弄了
abs。可惜我没有代码了。 -
PHP 中的坐标对我来说很完美。例如，当我裁剪图像的下半部分时，我得到 [x=0, y=278, w=550, h=550] 这正是我想要的。但是图像仍然会导致一半的选择，另一半是黑色的