JQuery crop image and preview preview

Question

Ok im using the jQuery imgareaselect plugin to display an overlay that displays the x and y coordinates of the overlay. I would like to use these values ​​to crop a copy of the image in real time to the user.

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

Any ideas appreciated :)

Answer 1

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

Using your example, you can update the onSelectEnd handler imgAreaSelect()as follows:

$('#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 coordinate of the background image x is a negative value selection.x1.

Answer 2

the operation must be performed on the server, javascript does not do this with minimal performance. However, you can show a simple preview of the real crop

• div .
• div.
• ( ) x y vars, .