in Playground on

jQuery Image Cropper with Uploader v1.1

Here’s an updated version of the Image Cropper. The upload button was replaced by an overlay on the image. There are also some extra functionalities : invert the picture colors rotate the image sepia transforms an image into greyscale see the DEMO download the source code here

From our monthly sponsor: Ship customer-facing metrics fast with Keen.io. Collect, store, query, & display stunning analytics.

crop1_1

Here’s an updated version of the Image Cropper. The upload button was replaced by an overlay on the image. There are also some extra functionalities :

  • invert the picture colors
  • rotate the image
  • sepia
  • transforms an image into greyscale

see the DEMO
download the source code here

Tagged with:

Chadking is an absolute geek that rarely leaves the comfort of his 3-screen desk. He is a self taught programmer and is addicted to all possible legal drugs.

http://tympanus.net/codrops/author/chadking/

AnimatedColumns_feat

Animated Image Columns

CrossroadsSlideshow_featured

Crossroads Slideshow

Objects_featured

Exploding 3D Objects with Three.js

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 42

Comments are closed.

  1. I am looking to upload all type of files.. now even after I changed in index.php):
    ‘fileExt’ : ‘*.jpg’, to ‘fileExt’ : ‘*.jpg;*.gif;*.png;*.bmp’, ; I could just upload the files but not save them.. please guide me..

  2. HI.

    Im localhost , no problems.

    But in sub-directory`s, im have problemas .

    Download de class in link:

    http://www.phpclasses.org/browse/file/8831.html

    And Replace:

    change.php(line 6 , 32 , 43)

    $_SERVER[DOCUMENT_ROOT] = getcwd();

    crop.php(line 24 and 40).

    : )

    Thanks.
    Im from brazilian.
    Dimitri Vargas Figueiredo Guimaraes.

  3. In the my steps, crop no functionate.

    Open de new class.upload.php.

    In the line `var $image_y`;

    paste:
    var $image_y;
    //changed
    var $jcrop;
    var $rect_w;
    var $rect_h;
    var $posX;
    var $posY;

    In the line ` $this->image_y = 150`;

    paste:
    $this->image_y = 150;
    //changed
    $this->jcrop = false;
    $this->rect_w = 100;
    $this->rect_h = 100;
    $this->posX = 0;
    $this->posY = 0;

    in the line ‘$res = imagecopyresampled($tmp, $image_src, 0, 0, 0, 0, $this->image_dst_x, $this->image_dst_y, $this->image_src_x, $this->image_src_y);’

    paste:

    if($this->jcrop){
    //echo “JCROP IS TRUE!”;
    $res = imagecopyresampled($tmp, $image_src, 0, 0, $this->posX, $this->posY, $this->image_x, $this->image_y, $this->rect_w, $this->rect_h);
    }
    else
    $res = imagecopyresampled($tmp, $image_src, 0, 0, 0, 0, $this->image_dst_x, $this->image_dst_y, $this->image_src_x, $this->image_src_y);

    // $res = imagecopyresampled($tmp, $image_src, 0, 0, 0, 0, $this->image_dst_x, $this->image_dst_y, $this->image_src_x, $this->image_src_y);

    Thanks
    Dimitri Vargas Figueiredo Guimaraes.

  4. I noticed that this code crops images with an aspect ratio of 1:1. How do I customize this to crop to whatever ratio I want?

  5. Hello!
    I changed the paths of crop.php (lines 6, 22 and 38) and change.php (lines 6, 34 and 45) and doesn’t work.

    It works perfectly in LOCALHOST but when I upload in my website, the upload be quite at 100%.
    You can help me?
    Thanks!

  6. Hi i found this tool and the discussion very helpful.

    My challenge is i cant find where the cropped images is supposed to be located after you click save.

    Any help would be appreciated.

  7. Hi,

    original image will go here
    crop1.1/photos/

    cropped image will go here
    crop1.1/photos/50

    to test with a new image just delete the original ones in both folders

    regards,

  8. One reason this script is not working for some people is mime type handling for flash uploads. On my Apache, the mime type shows as application/octet-stream; charset=binary.

    In the upload class, around line 2336, there is a block that starts with this comment // we need to work some magic if we upload via Flash

    It is followed by an if statement. Add to the if statement,
    || $this->file_src_mime == ‘application/octet-stream; charset=binary’

    That got the uploads working for me.

  9. Is there any source to download this Image Cropper for asp.net?
    I don’t understand the crop.php, upload.php and the files like these. Please help me 🙂 I really like this and i want to use it in my website.
    Thanks a lot

  10. Hi, very interesting code …
    I’ve had more or less the same problems as the others
    and indeed, changing the class.upload.php by the one there: http://www.phpclasses.org/browse/file/8831.html worked for me
    Besides, changing the paths in crop.php (for “$handle = new Upload(…” and both “handle->Process(…” allowed me to put the images where I wanted…
    I’m stuck with one last prob: the crop doesnt work. It saves the image in 100×100 but the entire image, not the protion I select…
    any clue as to why ?
    km

  11. edit:
    if you work on the class.upload.php donwloaded here: http://www.phpclasses.org/browse/file/8831.html ,
    to cropt the image, change the code in crop.php from
    $handle->rect_w = $_POST[‘w’];
    $handle->rect_h = $_POST[‘h’];
    $handle->posX = $_POST[‘x’];
    $handle->posY = $_POST[‘y’];

    to
    $handle->image_crop = array(
    $_POST[‘y’],
    ($handle->image_src_x-$_POST[‘x’]-$_POST[‘w’]),
    ($handle->image_src_y-$_POST[‘y’]-$_POST[‘h’]),
    $_POST[‘x’]
    );
    it works for me 🙂

  12. Hello,

    I searched on the blog but couldn’ find. On which licence are the code in the tutorials?
    Can we use your code in commercial projects?
    Thanks 🙂

  13. Hello can anybody tell me what must i do .

    everyone when upload a image is only one picture in destinaten call Picture.jpg

    what must i change for upload image

  14. ohh man what is that .

    when i take the crop folder i a subfolder the thumbs are not save

    can anyone give me the current code i have the demo files .

    where is the docu of this

    please help me

  16. Hi everyone!
    This is a really interresting script here.
    But I was wondering if anyone succeded to change the ratio (I need to crop a rectangle)?

  17. Hi, very interesting code …
    I’ve had more or less the same problems as the others
    and indeed, changing the class.upload.php by the one there: http://www.phpclasses.org/browse/file/8831.html worked for me
    Besides, changing the paths in crop.php (for “$handle = new Upload(…” and both “handle->Process(…” allowed me to put the images where I wanted…
    I’m stuck with one last prob: the crop doesnt work. It saves the image in 100×100 but the entire image, not the protion I select…
    any clue as to why ?
    km

  18. I basically had the same problem as KALIMUKTI. I updated the class.upload.php file but the final cropped picture isn’t coming out right

  19. @OVERFLO: yes i did. you need to change a few things. first the preview div css:
    .preview_container{
    width:122px;
    height:168px;

    then in uploadify
    ‘width’ : ‘122’,
    ‘height’ : ‘168’,

    in jcrop part of code

    aspectRatio: 122 / 168,

    in function showPreview

    var rx = 122 / coords.w;
    var ry = 168 / coords.h;

    and right below that function

    $imgpos = {
    width : ‘122’,
    height : ‘168’

    in crop.php
    $handle->image_x = 122; //size of final picture
    $handle->image_y = 168; //size of final picture

    and you’re done:)

  20. anyone else having a problem that on localhost everything works fine but when you put it on a server after image uploads crop window doesn’t appear? the temp file is uploaded in right place, i checked… i have newest class_upload.php and it’s tested on localhost (xampp)