Please help me, this is driving me nuts.
So I'm using the latest version of JCrop along with the latest version of JQuery.
My goal is to allow users to upload an image larger than 550x550px and then choose a selection that is square or portrait no larger than 550x825px.
My implementation is to resize the uploaded image to file that is either 550x550+ or 550+x550 depending on whether the x or y was larger on the original upload. The code for this works perfectly fine as the new image is stored on my server.
The problem I have is when the crop code is called unless the starting coordinates of the crop selection are [0,0] the returning image will be shifted upwards seemingly proportionate to the start coordinates, and the rest of the image will be black space. I tried to include images to demonstrate but wasn't allowed as I am still new to the site. I will try demonstrate with words. When an image with dimensions of [550, 828] was cropped with the starting co-ords of [0,0] the crop was successful. When the same image was cropped with coordinates starting at around [0, 100] the crop was unsuccessful. The selection was displayed ~90%, shifted upwards ~10%, and the remaining ~10% was black When the same image was cropped with coordinates starting at around [0, 278] the crop was unsuccessful. The selection was displayed ~50%, shifted upwards ~50%, and the remaining ~50% was black
Furthermore, I've checked the coordinates that JCrop is returning and they are correct.
Here's my Javascript to initialize JCrop var TARGET_W = 550; var TARGET_H = 825; // change the photo source for crop 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]);
Here's the Javascript function to send the co-ords to 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('');
}
});
Here's my PHP for the crop
//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'];
I'm using the standard vanilla Jcrop CSS with the exception of the following
.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;
}
The reason for this is because when the max width is set to 100% the preview image is really stretched and can't be easily displayed on the screen for the user to crop it.
I've looked at my code 100 times and I can't see any obvious errors. And like I mentioned, when the image is cropped from [0,0] it works perfectly. Is it perhaps a CSS problem that is causing the coordinates returned by JCrop to be inaccurate even though the values seem correct?
