Question

I’ve got a problem with this plugin

http://odyniec.net/projects/imgareaselect/

I think that image describes it all.

I’ve got selected whole image, but thumb shows only part of it.
It does appear so bad even on bigger images. my code

function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;
    var scaleX = 100 / selection.width;
    var scaleY = 100 / selection.height;

    $('#preview img').css({                          
        width: Math.round(scaleX * 300),             
        height: Math.round(scaleY * 300),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });                                              

}

$(function () {
    $('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true,
        fadeSpeed: 200, onSelectChange: preview });
});

I tried jcrop but it does the same

Answer 1

Looks like your scaling is off for your preview. Both your editing area and your preview appear to be the same size (~100px) but your JavaScript is set up for an editing area that is 300px square and a preview area that is 100px square; this means that your preview comes out 3 times wider than it should be and you end up with a too-large preview that is also clipped.