Imgareaselect에서 픽셀 단위로 이미지를 선택할 수있는 방법

Question

jQuery의 새로운 기능입니다. 145x190, 140X180 등과 같은 픽셀에 따라 이미지를 선택하고 싶습니다. 비율로 할 수는 있지만 픽셀이나 치수에 맞지는 않습니다. pls 날 도와. 내 코드는 다음과 같습니다 당신이 try my fiddle 사용자 정의 미리보기 이미지를 만들기 위해 이미지에서 선택합니다

function preview(img, selection) { 
    var scaleX = 100/(selection.width || 1); 
    var scaleY = 100/(selection.height || 1); 

    $('#ferret + div > img').css({ 
     width: Math.round(scaleX * 400) + 'px', 
     height: Math.round(scaleY * 300) + 'px', 
     marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
     marginTop: '-' + Math.round(scaleY * selection.y1) + 'px', 

    }); 
} 

$(document).ready(function() { 
    $('<div> <img src="http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg" style="position: relative;"> </div>') 
     .css({ 
      float: 'right', 
      position: 'relative', 
      overflow: 'hidden', 
      width: '100px', 
      height: '100px' 
     }) 
     .insertAfter($('#ferret')); 

    $('#ferret').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview ,minWidth: 100,minHeight: 100}); 
}); 

이

Answer 1

죄송합니다.

HTML

<div class="container"> 
    <div> 
     <input id="thumbWidth" placeholder="width" value="200" /> 
     <input id="thumbHeight" placeholder="height" value="200" /> 
    </div> 
    <p> 
     <img id="ferret" src="http://odyniec.net/projects/imgareaselect/ferret.jpg" alt="It's coming right for us!" title="It's coming right for us!" style="float: left; margin-right: 10px;" /> 
    </p> 
</div> 

JAVASCRIPT

: 아래의 코드를 사용하는 경우 동적으로 width and height through the textboxes의 값을 변경할 수 있습니다 제외

, 그것은, 내 위의 예와 동일하게 수행

$(document).ready(function() { 
var defaultVal = 100; 
var thumbWidth = $('#thumbWidth').val() | defaultVal, 
    thumbHeight = $('#thumbHeight').val() | defaultVal; 
$('#thumbWidth').on("change keyup", function() { 
    thumbWidth = this.value | defaultVal; 
    reLoad('cancel'); 
}); 
$('#thumbHeight').on("change keyup", function() { 
    thumbHeight = this.value | defaultVal; 
    reLoad('cancel'); 
}); 


function preview(img, selection) { 
    var scaleX = thumbWidth/(selection.width || 1); 
    var scaleY = thumbHeight/(selection.height || 1); 

    $('#ferret + div > img').css({ 
     width: Math.round(scaleX * $("#ferret").width()) + 'px', 
     height: Math.round(scaleY * $("#ferret").height()) + 'px', 
     marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
     marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
    }); 
} 
var reLoad = function (cancel) { 
    $('.premove').remove(); 
    $('<div class="premove"><img src="http://odyniec.net/projects/imgareaselect/ferret.jpg" style="position: relative;" /><div>') 
     .css({ 
     float: 'left', 
     position: 'relative', 
     overflow: 'hidden', 
     width: thumbWidth + 'px', 
     height: thumbHeight + 'px' 
    }) 
     .insertAfter($('#ferret')); 

    var fer = $('#ferret').imgAreaSelect({ 
     aspectRatio: thumbWidth + ':' + thumbHeight, 
     onSelectChange: preview, 
     instance: true 
    }); 
    if (cancel) fer.cancelSelection(); 
} 
reLoad(); 

});

Answer 2

... 당신이 내 질문을 이해 바랍니다. javascript 섹션으로 가서 thumbWidth 및 thumbHeight의 값을 변경하십시오. 기본적으로 미리보기 이미지를 원하는 크기로 조정하고 해당 비율을 aspectRatio으로 사용합니다. 좀 피곤 sloppyness에 대한

자바 스크립트 코드

var thumbWidth = 200, thumbHeight = 200; 

function preview(img, selection) { 
    var scaleX = thumbWidth/(selection.width || 1); 
    var scaleY = thumbHeight/(selection.height || 1); 

    $('#ferret + div > img').css({ 
     width: Math.round(scaleX * $("#ferret").width()) + 'px', 
     height: Math.round(scaleY * $("#ferret").height()) + 'px', 
     marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
     marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
    }); 
} 

$(document).ready(function() { 

    $('<div><img src="http://odyniec.net/projects/imgareaselect/ferret.jpg" style="position: relative;" /><div>') 
     .css({ 
      float: 'left', 
      position: 'relative', 
      overflow: 'hidden', 
      width: thumbWidth + 'px', 
      height: thumbHeight + 'px' 
     }) 
     .insertAfter($('#ferret')); 

    $('#ferret').imgAreaSelect({aspectRatio: thumbWidth+':'+thumbHeight, onSelectChange: preview }); 
});