jQuery imgAreaSelect

我有3個不同的div與他們的圖像。每個div具有不同的寬度和高度。我對他們都使用jQuery imgAreaSelect。裁剪工作正常。我的問題是我想在裁剪窗口打開時以初始裁剪開始。我希望這個最初的作物是給定長寬比的最大可能porportions。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 
});

這似乎沒有正常工作。任何幫助或見解都非常感謝。

非常感謝您

來源

2011-12-13 user583576

我們需要關於它不工作的更多細節 - JavaScript控制檯中的錯誤，奇怪的行爲，其他？你正在加載jQuery和imgAreaSelect插件是你嗎？ – Rup

沒有javascript錯誤。是的，我正在加載jquery和imgareaselesct插件。它似乎在大多數時間都有效，但當我使用較小的圖像時，作物要麼丟失，要麼離開左側，或者初始作物的長寬比關閉，直到作物被移動。其中裁剪移動的比例是正常的 – user583576

那麼這個作品對我好

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 + cropheight;

來源

2011-12-15 20:28:43 user583576

這是完整的代碼。它適用於我：

<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-13 10:41:21

jQuery imgAreaSelect

回答

相關問題