<script type="text/javascript">
var $thumb_width = 180; //Thumbnail size
var $thumb_height = 180;
function preview(img, selection) {
var scaleX = $thumb_width / ;
var scaleY = $thumb_height / ;
var scaleX2 = 100 / ;
var scaleY2 = 100 / ;
var scaleX3 = 60 / ;
var scaleY3 = 60 / ;
var scaleX4 = 30 / ;
var scaleY4 = 30 / ;
$('#avatar180 img').css({
width: (scaleX * 300) + 'px', //Get the actual width of the image
height: (scaleY * 300) + 'px', //Get the actual height of the image
marginLeft: '-' + (scaleX * selection.x1) + 'px',
marginTop: '-' + (scaleY * selection.y1) + 'px'
});
$('#avatar100 img').css({
width: (scaleX2 * 300) + 'px', //Get the actual width of the image
height: (scaleY2 * 300) + 'px', //Get the actual height of the image
marginLeft: '-' + (scaleX2 * selection.x1) + 'px',
marginTop: '-' + (scaleY2 * selection.y1) + 'px'
});
$('#avatar60 img').css({
width: (scaleX3 * 300) + 'px', //Get the actual width of the image
height: (scaleY3 * 300) + 'px', //Get the actual height of the image
marginLeft: '-' + (scaleX3 * selection.x1) + 'px',
marginTop: '-' + (scaleY3 * selection.y1) + 'px'
});
$('#avatar30 img').css({
width: (scaleX4 * 300) + 'px', //Get the actual width of the image
height: (scaleY4 * 300) + 'px', //Get the actual height of the image
marginLeft: '-' + (scaleX4 * selection.x1) + 'px',
marginTop: '-' + (scaleY4 * selection.y1) + 'px'
});
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val();
$('#h').val();
}
$(document).ready(function () {
$('#save_thumb').click(function() {
var x1 = $('#x1').val();
var y1 = $('#y1').val();
var x2 = $('#x2').val();
var y2 = $('#y2').val();
var w = $('#w').val();
var h = $('#h').val();
var jyduploadfile = $('#jyduploadfile').val();
if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h=="" || jyduploadfile==""){
alert("Please select upload image first");
return false;
}else{
return true;
}
});
});
$(window).load(function () {
$('#picView').imgAreaSelect({ selectionColor: 'blue', x1:60, y1:60, x2: 240,
maxWidth:300,minWidth:100,y2:240,minHeight:100,maxHeight:300,
selectionOpacity: 0.2 , aspectRatio: '1:'+($thumb_height/$thumb_width)+'', onSelectChange: preview });
});
</script>