jQuery imgAreaSelect

Question

У меня есть 3 разных div с изображениями в них. Каждый div с различной шириной и высотой. Я использую jQuery imgAreaSelect на всех них. Обрезка работает нормально. Моя проблема в том, что я хотел бы, чтобы окно обрезки открылось, чтобы начать с исходного урожая. Я бы хотел, чтобы этот начальный урожай был максимально возможным для данного соотношения сторон.

Код, с которым я работаю:

var aspectratio1 = $('#cutout_'+cutout_id).height() / $('#cutout_'+cutout_id).width();
aspectratio = "1:" + aspectratio1;
var image_width = $('#CutoutImage').width();
var image_height = $('#CutoutImage').height();
var aspect = 1 / aspectratio1 ;
var NewWidth = Math.round(image_height * aspect);
var left = ((image_width - NewWidth) / 2);
var right = Math.round(NewWidth + left);
var x1 = left;
var y1 = 0;
var x2 = right;
var y2 = image_height;

$('#CutoutImage').imgAreaSelect({
    aspectRatio: aspectratio,
    instance: true,
    zIndex: 9999,
    x1: x1,
    y1: y1,
    x2: x2, 
    y2: y2
});

Кажется, это не работает должным образом. Любая помощь или понимание очень ценится.

Большое спасибо

Answer 1

Это полный код.У меня это работает:

<script>

  // set info for cropping image using hidden fields
function setInfo(i, e) {
// Get on screen image
var screenImage = $("#uploadPreview");

// Create new offscreen image to test
var theImage = new Image();
theImage.src = screenImage.attr("src");

// Get accurate measurements from that.
var imageWidth = theImage.width;

//Get width of resized image
var scaledimagewidth = document.getElementById("uploadPreview").width;

if ( imageWidth > scaledimagewidth){ var ar =   imageWidth/scaledimagewidth;}
else { var ar = 1;}
$('#x').val(e.x1*ar);
$('#y').val(e.y1*ar);
$('#w').val(e.width*ar);
$('#h').val(e.height*ar);
}

 $(document).ready(function() {
var p = $("#uploadPreview");

// prepare instant preview
$("#uploadImage").change(function(){
// fadeOut or hide preview
p.fadeOut();

// prepare HTML5 FileReader
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

oFReader.onload = function (oFREvent) {
p.attr('src', oFREvent.target.result).fadeIn();
$('img#uploadPreview').imgAreaSelect({ x1: 120, y1: 90, x2: 280, y2: 210 });
};
});

// implement imgAreaSelect plug in (http://odyniec.net/projects/imgareaselect/)
$('img#uploadPreview').imgAreaSelect({
// set crop ratio (optional)
aspectRatio: '1:1',
onSelectEnd: setInfo
});
});



</script>    

Answer 2

Ну, это хорошо работает для меня

var aspectratio_cutout = ratio_hw;
aspectratio = "1:" + mycutout.ratio_hw;

var image_width = $('#imageToCutout').width();
var image_height = $('#imageToCutout').height();
var image_ratio_hw = image_height / image_width;
var image_ratio_wh = image_width / image_height;

if (mycutout.ratio_hw <= ratio_hw) {
    var cropwidth = image_width;
    var cropheight = cropwidth * ratio_hw;
    var x1 = 0;
    var y1 = (image_height - cropheight) / 2;
} else {
    var cropheight = image_height;
    var cropwidth = cropheight * ratio_wh;
    var x1 = (image_width - cropwidth) / 2;
    var y1 = 0;0;                                                           

}

var x2 = x1 + ширина полосы;var y2 = y1 + высота посадки;