imgareaselect на масштабированном изображении с предварительным просмотром не работает должным образом

Я пытался заставить плагин imgareaselect работать с масштабированным изображением, изображение динамически масштабируется с использованием css max-width: 100% и max-height: 100%, чтобы оно поместилось в его контейнер.

попробуйте: http://jsfiddle.net/37wcJ/

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

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 с плагином imgareaselect

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

Вы можете видеть, что я пытаюсь сделать динамическое соотношение сторон, что, я думаю, тоже не работает.


html jquery css crop
person ETAN    schedule 28.02.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Может быть, я опаздываю, но я здесь.

Если размер вашего контейнера предварительного просмотра составляет 150 пикселей * 150 пикселей, динамическое соотношение сторон выглядит не очень хорошо, вы можете просто установить его на «1:1».

//static aspectRatio

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

Затем вы можете изменить функцию предварительного просмотра на что-то вроде этого:

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

Вам нужно получить большую ширину и высоту изображения, поэтому функция вычисляет точную ширину и высоту, необходимые для предварительного просмотра.

Вот ваш модифицированный jsfiddle

person Olmectron    schedule 26.11.2014

arrow_upward
1
arrow_downward

Потому что aspectRatio используется для принудительного выбора соотношения сторон.

Если вы хотите изменить размер изображения с помощью css и аккуратно обрезать, вам нужно передать imageWidth и imageHeight:

$(selector).imgAreaSelect({
    imageWidth: 1920,
    imageHeight: 1080
});
person veksen    schedule 17.06.2014