Croping?

JavaScript
1

I threw together an image cropping thing,
http://miamiproviders.com/cropimages/?id=1
(modified http://demos.9lessons.info/cropimages as best I could cause the image is already on the server)
If, you can, select an image and submit the form, you are then taken to the cropping part.
you can crop the image fine, but when that box pops up asking you if you want to save the image, it doesn’t work and cant figure out where the problem is, best I can figure is that the problem lies in ajax_image.php as your taken to that page once its confirmed you want to save the image.

Can you see the problem?

2

Well your success callback looks like this:

success:function(rsponse){
  $("#cropimage").hide();
  $("#thumbs").html("");
  $("#thumbs").html("<img src='../providers/images/1/"+rsponse+"' />");
}

But I don’t see any elements corresponding to those IDs on the page.

Also, try adding:

console.log(rsponse);

to the top of the function and post the results back here.

3

ok took look at the sample and noticed to have an empty div with the id=“thumbs”. So I guess thats where the new cropped image appears. (So I added one)
I put that code at the beginning of that function


                            success:function(rsponse)
                                {
                                    console.log(rsponse);    
                                 $("#cropimage").hide();
                                    $("#thumbs").html("");
                                    $("#thumbs").html("<img src='<?=$dirname?>"+rsponse+"' />");
                                }
[

opened up the console via firebug and heres the screen shot

Does this help?

I dont understand what #cropimage.hide() does and why its even needed

Thanks

4

Hi,

This is what the ajax part of your script is doing:

When the cropping ends and the user confirms they want to save the image, it is firing off a GET request to the file ajax_image.php, passing it a load of parameters in a query string.

type:"GET",
url:"ajax_image.php?id=1&t=ajax&img="+$("#image_name").val()+"&w="+thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis,

The complete address looks like (taken from Chrome console):

http://miamiproviders.com/cropimages/ajax_image.php?id=1&t=ajax&img=undefined&w=124&h=124&x1=231&y1=111&_=1383853271290

It’s turning off caching for this particular request.

cache:false,

Then it’s specifying a success callback that will be executed if the AJAX request is successful (which it is, as you can tell by the 200 response code)

success:function(rsponse){
  $("#cropimage").hide();
  $("#thumbs").html("");
  $("#thumbs").html("<img src='../providers/images/1/"+rsponse+"' />");
}

This callback takes one parameter, which is the server’s response.

This appears to be a string, containing the name of a file: feature.jpg

It then hides the element with the id of “cropimage” and empties the element with the id “thumbs”.
After that it creates an <img> tag, setting its src attribute to a path relative to your script, concatenated with the server’s response (e.g. ‘…/providers/images/1/feature.jpg’)
It then inserts this image tag into the element into the element with the id of “thumbs”

It seems at this point that your JavaScript is doing what is expected and that the problem lies with your PHP script which should be saving a cropped image on your file system, but isn’t.

5

ok, thanks…
so itsa off to the php forum then?:
thanks for the explanation though, I really was lost on what that code meant

6

No probs.

This would be the place I would look next (the PHP script).

However, feel free to post back here if it turns out to be a JS issue after all, as AJAX really isn’t that mysterious, especially when you’ve got jQuery providing you with a nice cross browser syntax :slight_smile:

7

oh, I just noticed something,this is the complete address (taken from chrome)


http://miamiproviders.com/cropimages/ajax_image.php?id=1&t=ajax&img=undefined&w=124&h=124&x1=231&y1=111&_=1383853271290

I see a problem is the the img is undefined

shouldn’t it not?

8

Yeah, I noticed that too.
It all really depends what your PHP script is expecting.

The img parameter is defined thus:

img="+$("#image_name").val()+"

Which is simply the value of the element with the id of “image_name”.
This element doesn’t appear to be present on your page, hence it is being passed as undefined.

9

I think I may have figured something, if the URL is


	http://miamiproviders.com/cropimages/ajax_image.php?id=1&t=ajax&img=undefined&w=124&h=124&x1=231&y1=111&_=1383853271290

and this is the bit the generates it


url:"ajax_image.php?id=<?=$_GET['id']?>&t=ajax&img="+$("#image_name").val()+"&w="+thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis,

can I get the image name similar to how I got the thumb_width?


var thumb_width = obj.width;

Something like
var image_name = obj.name;
then rewrite the url thing like


url:"ajax_image.php?id=<?=$_GET['id']?>&t=ajax&img="+image_name+"&w="+thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis,

what do you think?

10

Sounds like a plan :slight_smile:

You can also do console.log(obj); and examine which properties it has.

11

dannngg, this is the result of the

console.log(obj);

which seem to be the properties of the crop, and need to get the name of the image to crop, that must be a job for PHP though but it sure would be nice if I could grab that name via jguery or ajax though

12

I think I found something out, I changed that url thing to


url:"ajax_image.php?id=<?=$_GET['id']?>&t=ajax&img=<?=$_POST['image']?>&w="+thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis,

and the URL then became
http://miamiproviders.com/cropimages/ajax_image.php?id=1&t=ajax&img=1383680050-252.png&w=109&h=109&x1=121&y1=124&_=1383942314510
So the img is now correct
But the image now is being saved as a 300x300 black square, so I quess the only problem now is the image crop part which is all PHP


$t_width = 300;    // Maximum thumbnail width
$t_height = 300;    // Maximum thumbnail height
$new_name = "feature.jpg"; // Thumbnail image name
$path = "../providers/images/{$_GET['id']}/";

if(isset($_GET['t']) and $_GET['t'] == "ajax")
    {
        extract($_GET);
        $ratio = ($t_width/$w); 
        $nw = ceil($w * $ratio);
        $nh = ceil($h * $ratio);
        $nimg = imagecreatetruecolor($nw,$nh);
        $im_src = imagecreatefromjpeg($path.$img);
        imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w,$h);
        imagejpeg($nimg,$path.$new_name,90);
        echo $new_name;
        exit;
    }

Thanks soo much for your help, now its to try and figure whats wrong with thhe bit of PHP which saves the image.