JCrop和PHP GD用黑条返回图像
请帮助我，这让我疯狂。
所以我使用最新版本的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返回的坐标，他们是正确的。
这是我的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'];
除了以下内容，我正在使用标准的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返回的坐标不准确，即使这些值看起来正确吗？
你可能想看看imagecopyresampled http://php.net/manual/en/function.imagecopyresampled.php
如果你从gif和png创建，你可能需要额外的选项，如colorallocate
这个想法是，您调整图像大小并用正确的像素填充此图像，因此gd不需要用黑像素（黑条）完成图像。
希望这可以帮助。
为了它的价值，我设法解决了我自己的问题。
问题是，当我使用imagejpeg / imagepng输出最终文件时，我覆盖了原始文件。 我将输出更改为$ src +'_cropped'，现在工作正常。
我不明白为什么这是一个问题。 但无论如何，它的工作。
链接地址: http://www.djcxy.com/p/78177.html