jquery imgareaselect预览不匹配选择

Question

我所做的选择与预览区域不匹配。我选择的图像部分与预览中显示的图像完全不同。而且，我甚至都不理解imgareaselect背后的逻辑。

以下是代码：

function preview(img, selection)
    {
        // check if selection are made 
        if (!selection.width || !selection.height)
            return;

       // setting scaling variable

        var scaleX = 100 / selection.width;
        var scaleY = 100 / selection.height;

        //  adding appropriate css to preview image

        $('#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)
        });

        //   setting value for coordinator input fields.

        $('#x1').val(selection.x1);
        $('#y1').val(selection.y1);
        $('#x2').val(selection.x2);
        $('#y2').val(selection.y2);
        $('#w').val(selection.width);
        $('#h').val(selection.height);    
    }

    $(function ()
    {
        $('#blah').imgAreaSelect(
        {
            /*
                A string of the form
                "width:height"
                which represents the aspect ratio to maintain
                example: "4:3"
            */
            aspectRatio: '1:1',
            /*
                If set to true,
                resize handles are shown on the selection area;
                if set to "corners", only corner handles are shown
                default: false
            */
            handles: "corners",
            fadeSpeed: 200,
            /*
                Callback function called when selection changes,
                we are calling our preview function for demo.
            */
            onSelectChange: preview
        });
    });