Кроп картинки (jCrop)

HTML:

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/200px-JavaScript-logo.png" id="photo">

<div id="thumb_container">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/200px-JavaScript-logo.png" id="thumb">
</div>

JavaScript:

var thumb  = {};
thumb['width']  = 120; // ширина миниатюры
thumb['height'] = 120; // высота миниатюры

var source = {};
source['width']  = 200; // ширина миниатюры
source['height'] = 200; // высота миниатюры


$("#photo").Jcrop({
    onChange: showPreview,
    onSelect: showPreview,
    aspectRatio: thumb['width']/thumb['height'],
    // boxWidth:100 — задать ширину картинки
});

function showPreview(coords)
{
    var rx = thumb['width']   / coords.w;
    var ry = thumb['height']  / coords.h;

    $('#thumb').css({
        width:  Math.round(rx * source['width']) + 'px',
        height: Math.round(ry * source['height']) + 'px',
        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
        marginTop:  '-' + Math.round(ry * coords.y) + 'px'
    });
}

Пример на JSFiddle