Jcrop с предварительным изменением размера - PullRequest
Новая
       12

Jcrop с предварительным изменением размера

3 голосов
/ 15 сентября 2011

Я использую Jcrop с панелью предварительного просмотра, как показано в руководстве здесь http://net.tutsplus.com/articles/news/working-with-the-jcrop-plugin/. Здесь показано, как создать простой интерфейс Jcrop с панелью предварительного просмотра, чтобы показать результат при кадрировании.К сожалению, панель предварительного просмотра в этом случае имеет фиксированный размер и просто увеличивает и уменьшает изображение при кадрировании, создавая обрезанное изображение того же фиксированного размера.

Я хотел бы иметьПанель предварительного просмотра изменяет размер вместе с инструментом обрезки, чтобы отобразить полученное изображение по мере того, как пользователь обрезает, что позволяет пользователю выбирать размеры получаемого изображения.Затем я могу применить максимальный или минимальный размер при загрузке изображения.

Панель предварительного просмотра CSS и код приведены ниже.Обратите внимание, что переменные targ_h и targ_w определены для того, что я выберу.Orig_w и orig_h считываются из исходного изображения. 

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

Кто-нибудь делал это раньше, и ширина и высота панели предварительного просмотра менялись в зависимости от ширины и высоты инструмента кадрирования?

1 Ответ

9 голосов
/ 15 сентября 2011

Это то, что я сделал у себя: 

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

Я думаю, maxX будет относиться к вашему $targ_w.Это настроено таким образом, потому что у меня есть несколько экземпляров jCrop на одной странице.Отредактируйте его в зависимости от ваших настроек.

...