jQuery crop an image and see a live preview

Ok im using jQuery imgareaselect plugin to display an overlay that maps the x and y co-ordinates of the overlay. I'd like to use these val开发者_Go百科ues to crop a copy of the image live to the user.

I imagine I just need to find the best way to structure the HTML and CSS that displays the image.

Any ideas appreciated : )

---

Similar to Gustavo's answer, you can position the image as a background of a div (or any element) and then use x and y positions on the background image in conjunction with the width and height of the div to create a framed preview of the cropped image. The actual cropped file must be generated on the server using an appropriate image library.

Using your example, you can update the onSelectEnd handler of imgAreaSelect() like so:

$('#ladybug').imgAreaSelect({
    onSelectEnd: function (img, selection) { 
        var div = $('.imgwrapper2');

        //image
        div.css('background-image', 'url(' + img.src + ')');

        //width
        div.css('width', selection.x2 - selection.x1);

        //height
        div.css('height', selection.y2 - selection.y1);

        //x offset
        div.css('background-position-x', -selection.x1);

        //y offset
        div.css('background-position-y', selection.y2);
    }  
});

Note that the value for the background image's x coordinate is the negative of selection.x1.

---

the operation must be executed in the server, javascript do not do it with minimal performance. However, you can show a simple preview of the real crop

1. place a div with size of the croped area
2. set your image to background of this div.
3. set the background margins (left and top) to x and y vars given of the crop.