File: /var/www/html/tmpr/..//tmpr/..//cropmeX.php
<?php
$mag = $_GET["mag"];
$live_img = 'v/uploads/raw/';
$msg_id2 =$msg_id;
$msg_id = $db->base64url_decode($msg_id);
$result = $db->getnewsbyidr2($msg_id);
$original= $result[0]["original"];
list($upana, $urefu) = getimagesize($live_img.$original);
if ($upana <300)
{
header("Location: ./index.php?category=alert-danger&mode=photos&msg=Your photo is of low quality or too small to edit! Minimum width should be 500px ");
exit();}
if ($upana >1500)
{
header("Location: ./autosize.php?action=$action&msg_id=$msg_id2");
exit();}
?>
<link rel="stylesheet" href="demo_files/main.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<style type="text/css">
/* Apply these styles only when #preview-pane has
been placed within the Jcrop widget */
.jcrop-holder #preview-pane {
display: block;
position: absolute;
z-index: 2000;
top: 10px;
right: -280px;
padding: 6px;
border: 1px rgba(0,0,0,.4) solid;
background-color: white;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}
/* The Javascript code will set the aspect ratio of the crop
area based on the size of the thumbnail preview,
specified here */
#preview-pane .preview-container {
width: 250px;
height: 170px;
overflow: hidden;
}
</style>
<table id="Table_01" width="100%" height="537" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td align="center" valign="top"><table width="100%" border="0">
<tr>
<td width="348" ><h2 style="margin-top:0px" class="post-title" id="status">Crop Picture</h2></td>
<td align="right">
<a class="followme btn-lg btn-info pull-right">Publish</a>
</td>
</tr>
</table>
<table width="100%" border="0" >
<tr>
<td valign="top" width="500" >
<form id="magazine" method="POST">
<input type="hidden" id="mag" name="mag" value="yes" />
<input id="effecto" name="effecto" type="hidden" value="contrast" autocomplete="off">
<input type="text" id="x" name="x" value="1" />
<input type="text" id="y" name="y" value="1" />
<input type="text" id="w" name="w" />
<input type="text" id="h" name="h" />
</form>
<script type="text/javascript">
$(function() {
$('.followme').click(function() {
loading_show();
$('#submit').css("display","none");
$('#submitX').css("display","none");
var effect = $(this).attr("id");
var image = "<?php echo $original ?>";
$('#effecto').val(effect);
var x= encodeURI(document.getElementById('x').value);
var y= encodeURI(document.getElementById('y').value);
var mag= encodeURI(document.getElementById('mag').value);
var myaccount= window.localStorage["myaccount"];
var x = $("#x").val();
var y= $("#y").val();
var w = $("#w").val();
var h= $("#h").val();
/*alert(x);
return;*/
$("#check").html("Crunching...");
$("#check").html("Cropping please wait...");
$("#notify").html("Cropping | Approx 3secs...");
$('#picme').css("opacity","0.30");
$('#picme').css("filter","alpha(opacity=30)");
$.ajax
({
type: "GET",
url: 'cropMobile.php?execute=yes&y='+y+'&x='+x+'&width='+w+'&height='+h+'&nocache=1&cropratio=1:1&image=/v/uploads/raw/<?php echo $original ?>',
data: "page=4",
success: function(msg)
{
window.location = "autosize.php?msg_id=<?php echo $msg_id2 ?>&prepare=no&action=<?php echo $action ?>";
}
});
});
});
</script>
<script src="js/jquery.Jcrop.js"></script>
<script type="text/javascript">
jQuery(function($){
// Create variables (in this scope) to hold the API and image size
var jcrop_api,
boundx,
boundy,
// Grab some information about the preview pane
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
console.log('init',[xsize,ysize]);
$('#cropbox').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
<?php if(!empty($mag))
{?> minSize: [ 500, 666 ],
maxSize: [ 1000, 1166 ],
aspectRatio: 500/666 ,
setSelect: [ 10, 10, 500, 666 ],
<?php }
else
{?>
minSize: [ 500, 500 ],
maxSize: [ 1000, 1000 ],
aspectRatio: 500/500 ,
setSelect: [ 1, 1, 500, 500 ],
<?php }
?>
onSelect: updateCoords,
bgFade: true,
bgOpacity: .3
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
// Move the preview into the jcrop container for css positioning
$preview.appendTo(jcrop_api.ui.holder);
});
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function updatePreview(c)
{
if (parseInt(c.w) > 0)
{
var rx = xsize / c.w;
var ry = ysize / c.h;
$pimg.css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};
});
</script>
<div id="preview-pane" style="display:none">
<div class="preview-container">
<img src="" class="jcrop-preview" alt="Preview" />
</div>
</div>
<div id="preview" class="animated fadeIn" >
<img src="taswira.php?nocache=1&image=/v/uploads/raw/<?php echo $original ?>#<?php rand(1,3);?>" style="-moz-border-radius : 3px 3px 3px 3px:-webkit-border-radius : 3px 3px 3px 3px;border-radius : 3px 3px 3px 3px; " id="cropbox" >
<div class="badge bg-info pull-none" id="notify" style="margin-top:3px; padding:5px; padding-top:3px; padding-right:7px;padding-left:7px"></div>
</div>
</td>
<td valign="top" align="center" style="padding-left:15px" >
</td>
</tr>
</table>
</td>
</tr>
</table>