Question

I am using Jcrop with a preview pane as seen in the tutorial here http://net.tutsplus.com/articles/news/working-with-the-jcrop-plugin/. This shows how to create a simple Jcrop interface with a preview pane to show the result as you crop. Unfortunately the preview pane in this case is of a fixed size and simply zooms the image in and out as you crop, producing a cropped image of that same fixed size.

What I’d like to do is have the preview pane resize along with the crop tool to display the resulting image as the user crops, allowing the user to decide the dimensions of the resulting image. I can then apply a max or min size when the image is uploaded.

The preview pane CSS and the code are below. Note the targ_h and targ_w variables are defined to whatever I choose. The orig_w and orig_h are read from the original image.

    #preview
    {
        width: <?php echo $targ_w?>px;
        height: <?php echo $targ_h?>px;
        overflow:hidden;
    }



function updateCoords(c)
        {
            showPreview(c);
            $("#x").val(c.x);
            $("#y").val(c.y);
            $("#w").val(c.w);
            $("#h").val(c.h);
        }

        function showPreview(coords)
        {
            var rx = <?php echo $targ_w;?> / coords.w;
            var ry = <?php echo $targ_h;?> / coords.h;

            $("#preview img").css({
                width: Math.round(rx*<?php echo $orig_w;?>)+'px',
                height: Math.round(ry*<?php echo $orig_h;?>)+'px',
                marginLeft:'-'+  Math.round(rx*coords.x)+'px',
                marginTop: '-'+ Math.round(ry*coords.y)+'px'
            });
        }

Has anyone done this before and had the width and height of the preview pane change with the width and height of the crop tool?

Answer 1

This is what I did in mine:

function showPreview(photoDiv, coords, maxX, maxY)
{
    var rx = maxX / coords.w;
    var ry = maxY / coords.h;

    rx = (rx == 0) ? 1 : rx;
    ry = (ry == 0) ? 1 : ry;

    photoX = $("#" + photoDiv + " #photo").width();
    photoY = $("#" + photoDiv + " #photo").height();

    $("#" + photoDiv + " #preview").css({
        width: Math.round(rx * photoX) + 'px',
        height: Math.round(ry * photoY) + 'px',
        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
        marginTop: '-' + Math.round(ry * coords.y) + 'px'
    });
}

I guess maxX will refer to your $targ_w. This is setup this way because I have multiple jCrop instances in one page. Edit it depending on your setup.