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 +cropwidth ;
var y2 = y1 + 作物高度；