CODEWITHSUNDEEP
javascriptjqueryjquery-pluginsimage-processingcrop
genesis
genesis

Reputation: 50966

Jquery image cropping problem - showing another part of image than selected

I've got a problem with this plugin

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

I think that image describes it all.

enter image description here 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

Upvotes: 1

Views: 889

Answers (2)

Carol Serrão
Carol Serrão

Reputation: 101

Value "100" are width's and height's preview image and value "300" are width's and height's principal image.

Upvotes: 0

mu is too short
mu is too short

Reputation: 434615

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.

Upvotes: 3

Related Questions