AjaxCrop – Jquery and PHP Crop tool

AjaxCrop – inspired by PHP & JQueryPhoto Upload and Crop .I decided to make my own version and based on imgAreaSelect ,Jquery and Asido.
I hope you like it and please feel free to add a comment.

view demo | download files

EDIT: I have updated the link of asido to http://sourceforge.net/projects/asido/files/ – thanks to Johan.

What you Need:

  1. PHP 5
  2. GD Library
  3. Jquery
  4. ImgAreaSelect
  5. Asido

How it works:

  1. After uploading the local image, it will be processed and converted to jpg regardless of image type.
  2. It accepts Jpg,Gif and Png and then add a white background if the image will not fit on the exact dimension. You can change the background color by editing the php file. Please visit Asido for more details: http://sourceforge.net/projects/asido/files/
  3. The file upload is done via iframe to prevent page refresh thus mimicking Ajax (there is no way to do Ajax on file inputs) .
  4. Jquery will get the file content of the iframe and then load it to the main page. You will see the big image , cropped and converted to jpg or an error if the file upload is unsuccessful.
  5. Click create thumbnail to create a thumbnail, in the demo you can see the image source of the thumbnail so that you can use it in your application.
  6. Have FUn!

Screenshot

Screenshot

14 Responses to “AjaxCrop – Jquery and PHP Crop tool”

  1. Johan says:

    Watch out – loading asido.info gives a virus alert that the site is infected

  2. admin says:

    i have been visiting that page since they first launched but recently I have been warned by Avast that the site is infected.
    anyway, just get the files here:

    http://sourceforge.net/projects/asido/files/

    Thanks Johan for the information.

  3. Nele says:

    The button ‘upload’ doesnt work
    I didnt take a picture that was too big (500kb)

  4. admin says:

    I have re created your problem.

    It seems that it cannot upload if the image extension is not correct. Like a BMP file with a JPG extension.

    Also I found a bug on my work, updated the files in source forge.

    Line 47:
    before
    if($_FILES['files']['size'] < 2097000 ){
    after
    if($_FILES['photo']['size'] < 2097000 ){

  5. Cami says:

    Hello Keith! I have one problem, but I don’t know what I do wrong! After I upload the image, it does not load to the thumb! =/ I check the big folder, and the image is there, but the screen does not appear. I have not changed anything in the files we have only the directories of files. Is it a problem with my version of the GD library or PHP?

  6. admin says:

    @Cami:

    Can you see the file extension if it’s really jpg? I have fixed a bug, see my post above.

  7. Design1 says:

    Hi All,

    How can i get the right thumbnail path to save it in my database?

    Regards

  8. Gustavo says:

    Good afternoon, I’m building a system and would like to know how to change an image, more precisely using the system I posted here and would like when you select an image to change over I could just choose another region.
    I thank your attention.

    Gustavo Ribas Logullo

  9. Swathi says:

    Hi ,
    I have s:file upload tag in my jsp.and one sx:autocompleter tag.
    if i change the element in sx:autocompleter the ajax to work.
    But the s:file tag is preventing not to work ajax properly.
    Can you give me some idea.Pls…..
    Im trying this for past one week…..
    Thanks in advance.

  10. [...] Asido AjaxCrop – Jquery and PHP Crop tool PHP & jQuery image upload and crop [...]

  11. Helper says:

    @Cami (and anyone else not seeing the image after upload): make sure that your PHP is set to not show Notices. I had my PHP set to show all errors and all notices and line 92 of func.php was the cause. I changed the code “$arr['thumb'] === true){” to ” if(isset($arr['thumb']) && $arr['thumb'] === true){” and now all works perfectly :) Hope this helps someone.

  12. Helper says:

    Another small problem I have found. When the PHP functions (like resizeImg) have an error (like user tries to upload a file with an extension that is not allowed) the PHP function tries to echo the error message.

    This doesn’t work as the error is trying to be displayed inside an image tag (as Javascript is outputing an image file to the browser) as seen below:

    // load to preview image
    $(‘#preview’).html(img);
    var img_id = ‘big’;
    /////// get image source , this will be passed into PHP
    $(‘.img_src’).attr(‘value’,img)
    $(‘#preview’).html(”);
    }
    $(‘#div_’+fname).html(”);

    Somehow the error from the PHP function needs to be redirected to the JS so that JS is aware an error occured with the upload and doesn’t still try to output text inside an image tag if an error happens. Otherwise this is an awesome script. keep up the good work!

  13. Utopia says:

    how can i use it for zendframework? thanks

Leave a Reply