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

Може би закъснях, но ето го.

Ако вашият контейнер за предварителен преглед е 150px * 150px, тогава не изглежда добре да имате динамичен aspectRatio, можете просто да го зададете на "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