96 lines
2.8 KiB
HTML
96 lines
2.8 KiB
HTML
{php include pubTemplate("header")}
|
|
<script src="{SITE_URL}public/js/jcrop/jquery.Jcrop.js" type="text/javascript"></script>
|
|
<link rel="stylesheet" href="{SITE_URL}public/js/jcrop/jquery.Jcrop.css" type="text/css" />
|
|
<script type="text/javascript">
|
|
|
|
jQuery(function($){
|
|
|
|
// Create variables (in this scope) to hold the API and image size
|
|
var jcrop_api, boundx, boundy;
|
|
|
|
$('#target').Jcrop({
|
|
minSize: [48,48],
|
|
setSelect: [0,0,190,190],
|
|
onChange: updatePreview,
|
|
onSelect: updatePreview,
|
|
onSelect: updateCoords,
|
|
aspectRatio: 1
|
|
},
|
|
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;
|
|
});
|
|
function updateCoords(c)
|
|
{
|
|
$('#x').val(c.x);
|
|
$('#y').val(c.y);
|
|
$('#w').val(c.w);
|
|
$('#h').val(c.h);
|
|
};
|
|
function checkCoords()
|
|
{
|
|
if (parseInt($('#w').val())) return true;
|
|
alert('Please select a crop region then press submit.');
|
|
return false;
|
|
};
|
|
function updatePreview(c){
|
|
if (parseInt(c.w) > 0)
|
|
{
|
|
var rx = 48 / c.w; //小头像预览Div的大小
|
|
var ry = 48 / c.h;
|
|
|
|
$('#preview').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'
|
|
});
|
|
}
|
|
{
|
|
var rx = 199 / c.w; //大头像预览Div的大小
|
|
var ry = 199 / c.h;
|
|
$('#preview2').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>
|
|
<!--main-->
|
|
<div class="container">
|
|
{template set_menu}
|
|
|
|
|
|
<div class="cleft bbox">
|
|
|
|
<h1>裁切头像</h1>
|
|
|
|
<div style="float:left;"><img width="300" id="target" src="{SITE_URL}uploadfile/user/{$strUser['face']}" ></div>
|
|
|
|
<div style="width:190px;height:195px;margin:0 10px;overflow:hidden; float:left;"><img style="float:left;" id="preview2" src="{SITE_URL}uploadfile/user/{$strUser['face']}" ></div>
|
|
|
|
<form action="{SITE_URL}index.php?app=user&ac=set&ts=cutdo" method="post" onsubmit="return checkCoords();">
|
|
<input type="hidden" id="x" name="x" />
|
|
<input type="hidden" id="y" name="y" />
|
|
<input type="hidden" id="w" name="w" />
|
|
<input type="hidden" id="h" name="h" />
|
|
<input class="btn" type="submit" value="裁剪" />
|
|
</form>
|
|
|
|
<a href="{tsUrl('user','set',array('ts'=>'face'))}">返回头像设置</a>
|
|
|
|
</div>
|
|
|
|
<div class="cright"></div>
|
|
|
|
</div>
|
|
|
|
{php include pubTemplate("footer")} |