imgareaselect對縮放圖像與預覽不能正常工作

我一直在試圖使imgareaselect插件工作縮放圖像，圖像是動態縮放使用CSS最大寬度：100％和最大高度：100％，使其適合它的容器。imgareaselect對縮放圖像與預覽不能正常工作

正如你可以在上面小提琴，預覽沒有顯示在選擇同樣的事情看，嘗試選擇樹，你可以清楚地看到它後面的視野。

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

你可以看到我嘗試做一個動態的縱橫比，我認爲它不工作太。

來源

2014-02-28 edward

也許我來晚了，但我在這裏不言而喻。

如果你的預覽容器是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) 
});

你需要獲得大圖像的寬度和高度，因此函數計算德確切寬度和高度的預覽圖像需要。

這是您的modified jsfiddle

來源

2014-11-26 14:46:35 Olmectron

因爲aspectRatio用於強制高寬比選擇。

如果要修改與CSS圖像大小，準確地切割，你需要通過imageWidth和imageHeight：

$(selector).imgAreaSelect({ 
    imageWidth: 1920, 
    imageHeight: 1080 
});

來源

2014-06-17 17:38:53 veksen

imgareaselect對縮放圖像與預覽不能正常工作

回答

相關問題