Image Select and Crop on Browser

Question

I've got a question. So I would like to make a web app that does this:

1. allows user to select an image from his file system
2. using a crop tool, select an area of the image that the user would like to crop
3. preview the crop
4. save the cropped image

I have tried 2 approaches: the first one was to use HTML5 canvas. After a lot of finagling, I was able to select an image, crop it (crop tool coordinates are saved and the image is processed server side), preview it and submit it.

But I had problems if I selected an image, cropped it, then chose to select another image and try cropping that. The previous image selection was messing with the new one.

The second approach was to use JCrop. Using two example that were included on their website, I was able to use a crop tool to select an area, preview the crop in real time, and save the crop tool coordinates.

But the problem here was that I can't use a user-uploaded image; the image url is hard coded in the img tag. When I tried to implement a solution that took a user's selection, the image never came up.

So does anyone have a solution to these problems, or is aware of another technology that does what I need without any of the above issues? Please let me know. Thank you.

Answer 1

I've developed a Jquery plugin that does exactly what you want: it selects an image (or drag and drop it), lets you preview it and preview cropping area, change selected image and upload it. For cropping image, my plugin includes JCrop. Plus, it validates files (max KB, extension, image min size, etc.), allows you select multiple files and style button. It accepts several options.

You'll find DEMO, documentation and download link here: Jquery Custom Input File Plugin

You can do something like this. Markup:

 <form id="your-form" action="process_form.php">
   <input id="your-input-file" name="your-input-file">
   <input type="submit" value="Upload file">
 </form>

When document is ready:

 $('#your-input-file').customFile({
    type : 'image',
    image : {
       crop : true,
       cropSize: [300,200], // width and height of result
       maxSize : [1080,720] // if you want to set up a maximum value for original images
    },
    maxKBperFile : 500,
    multiple: false // when you select or drop a new image, this one replaces previous one

    //More options...

 });

 //And upload form:
 $('#your-form').submit(function(e){
    e.preventDefault();
    $.customFile.ajax('#your-form', {
        success : function(response){
             console.log(response)
        }
    })
 });