Select part of image (crop)

by PhilQ

HTML

<div id="cropbox">
    <div id="cropbox_sel" title="Sleep blok om te positioneren, sleep randen om formaat te wijzigen">
    </div>
</div>

CSS

.ui-icon-gripsmall-diagonal-se{
    background: none;
}
#cropbox {
    position: relative;
    background-color: #3D6AA2;
    background: url("http://djdesignerlab.com/wp-content/uploads/2011/11/webdesign_tips_1.jpg") no-repeat top left transparent;
    width: 500px;
    height: 300px;
    overflow: hidden;
    border: 0px solid #808080;
}
#cropbox_sel {
    cursor: move;
    position: relative;
    top: 75px;
    left: 125px;
    width: 250px;
    height: 150px;
    -webkit-box-shadow:  0px 0px 0px 500px rgba(0, 0, 0, 0.6);
    box-shadow:  0px 0px 0px 500px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

JavaScript

$(document).ready(function() {
    $("#cropbox_sel").resizable({
        containment: "parent",
        handles: "all",
        start: function(e, ui) {
        },
        resize: function(e, ui) {
        },
        stop: function(e, ui) {
           var x1 = parseInt($("#cropbox_sel").css("left"));
           var x2 = parseInt(x1+$("#cropbox_sel").width()+2);
           var y1 = parseInt($("#cropbox_sel").css("top"));
           var y2 = parseInt(y1+$("#cropbox_sel").height()+2);
           alert(x1+" -> "+x2+" \n "+y1+" -> "+y2);
        },
    }).draggable({
        containment: "parent",
        drag: function(e, ui) {
        }
    });
});