两种截取方式:
1:通过服务器进行截取。
2:使用canvas 画布进行本地的截取后上传服务器。
准备工作
下载jcorp插件
html页面代码
<div class="upload-head fr">
<p class="head-set-title">头像设置</p>
<div class="head-set-pic" style="width:140px;height:140px;overflow:hidden">
<img src="/static/images/head-set.jpg" id="picImg">
</div>
<p class="pdf-max">jpg,jpeg,png,BMP大小不超过5M</p>
<div class="upload-words"><span class="reletive-area"><input class="input-file" type="file" id="upload"><input type="hidden" name ="picture" id="picture"><a class="upload-btn" href="javascript:;">上传头像</a></span>
</div>
</div>
jcorp插件的使用
首先,在改变<input type="file">的src的时候触发事件
file为上传的图片,func为截取框点击确认的时候触发的方法
var changeHeadPic= function(file,func)
{
if (file.files && file.files[0])
{
var reader = new FileReader();
reader.readAsDataURL(file.files[0]);
reader.onload = function (e) {
//将弹框中显示的图片设置为上传的图片,进行显示
$('#cutimg').removeAttr('src');
$('#cutimg').attr('src', e.target.result);
//将头像显示的图片设置为上传的图片,进行显示
$('#picImg').removeAttr('src');
$('#picImg').attr('src', e.target.result);
//设置弹框中显示图片的高度为自动,宽度在样式中进行设置
$('#cutimg').css({
height:"auto"
});
//调用插件,进行截取
jcrop = $.Jcrop('#cutimg',{
//设置截取框的大小和起始位置setSelect: [ 50, 50, 140, 140 ],
allowSelect:false,
bgOpacity:0.6,
dragEdges:true,
//规定宽高比例为1 即为正方形aspectRatio: 1,
//移动截取框的事件onSelect: updateCoords,
onChange: updateCoords
});
};
if(jcrop != undefined)
{jcrop.destroy();
}
if(typeof(func) == "function")
{
$("#change-pic").data("confirmFunction",func);
}
//显示弹框$("#change-pic").show();
}
}
//移动截取框的事件
var updateCoords = function (c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
xsize = 140;
ysize = 140;
var rx = xsize / (c.w);
var ry = ysize / (c.h);
if(jcrop != undefined) {
var bounds = jcrop.getBounds();
boundx = bounds[0];
boundy = bounds[1];
}
if(boundx && boundy)
{ <