1

画像を含む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
});

これは正しく動作していないようです。どんな助けや洞察も大歓迎です。

どうもありがとうございました

4

2 に答える 2

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>
于 2015-03-13T10:41:21.153 に答える
0

まあ、これは私にとってはうまくいきます

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 + 作物の高さ;

于 2011-12-15T20:28:43.217 に答える