imgareaselect on scaled image with preview not working properly

Question

I have been trying to make imgareaselect plugin work on scaled image, the image is scaled dynamically using css max-width:100% and max-height:100% to make it fit into its container.

try: http://jsfiddle.net/37wcJ/

As you can see in the fiddle above, the preview is not showing the same thing in the selection, try selecting the horizon behind the tree you can see it clearly.

HTML:

<div id="container">
    <img src="http://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" id="croptarget">
    <div id="preview-cont">
        <img src="http://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" id="preview">
    </div>
</div>

Jquery with imgareaselect plugin

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

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

    //dynamic aspect ratio
   var daspectratio = $('#croptarget').height() /  $('#croptarget').width();
  var paspectratio = $('#preview-cont').height() / $('#preview-cont').width();
   var dyap =daspectratio+":" + paspectratio;

                        $('#croptarget').imgAreaSelect({
                            aspectRatio: dyap,
                            handles: true,
                            fadeSpeed: 200,
                            onSelectChange: preview
                        });
});

CSS

   #container{
        background-color:#ccc;
        width:400px;
        height:300px;
    }

    #croptarget{
        max-width:100%;
        max-height:100%;
    }

    #preview-cont{
        width:150px;
        height:150px;
        overflow:hidden;
        border:1px solid #000;
        float:right;
    }

You can see im trying to make a dynamic aspect ratio, which I think its not working too.

Answer 1

Maybe I'm late, but I here it goes.

If your preview container is 150px * 150px, then it doesn't look nice to have a dynamic aspectRatio, you can simply set it to "1:1".

//static aspectRatio

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

Then, you can change the preview function to something like this:

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

You need to get the large image width and height, so the function calculates de exact width and height the preview image needs.

Here's your modified jsfiddle

Answer 2

Because aspectRatio is used to force an aspect ratio to the selection.

If you want to modify your image size with css, and cut accurately, you need to pass imageWidth and imageHeight:

$(selector).imgAreaSelect({
    imageWidth: 1920,
    imageHeight: 1080
});