头像裁切上传、实时预览

前台使用jcrop图片裁切插件，后台使用Python的PIL image裁切图片

最终效果图：

前台：

HTML:

<div id="avatarArea" class="clearfix"><span style="white-space:pre"></span><img id="avatarCrop" src="avatar.jpg" /><span style="white-space:pre"></span><p class="avatarPreviewAlert">头像预览：</p><span style="white-space:pre"></span><div id="preview_box" class="crop_preview"><span style="white-space:pre"></span><img id="avatar_preview" src="avatar.jpg" /><span style="white-space:pre"></span></div></div><div class="btnBar"><span style="white-space:pre"></span><div class="avatarInputDiv"><input class="avatarInput" type="file" accept=".jpg,.png,.gif,.JPG,.PNG,.GIF,.jpeg,.JPEG" /></div><span style="white-space:pre"></span><div class="saveAvatar"></div><span style="white-space:pre"></span>仅支持JPG、PNG、GIF图片文件，且文件小于3M</div>

CSS:

#avatarArea{<span style="white-space:pre"></span>width: 700px;<span style="white-space:pre"></span>margin-left: 86px;<span style="white-space:pre"></span>margin-top: 20px;}#avatarCrop{<span style="white-space:pre"></span>max-width: 500px;<span style="white-space:pre"></span>height: auto;}.avatarPreviewAlert{<span style="white-space:pre"></span>margin-left: 20px;<span style="white-space:pre"></span>display: inline-block;}#preview_box{<span style="white-space:pre"></span>width: 120px;<span style="white-space:pre"></span>height: 120px;<span style="white-space:pre"></span>margin-left: 20px;<span style="white-space:pre"></span>display: inline-block;<span style="white-space:pre"></span>overflow: hidden;<span style="white-space:pre"></span>border-radius: 60px;<span style="white-space:pre"></span>position: relative;}.btnBar{<span style="white-space:pre"></span>width: 100%;<span style="white-space:pre"></span>height: 32px;<span style="white-space:pre"></span>margin-top: 20px;<span style="white-space:pre"></span>line-height: 32px;}.avatarInputDiv{<span style="white-space:pre"></span>width: 82px;<span style="white-space:pre"></span>height: 32px;<span style="white-space:pre"></span>position: relative;<span style="white-space:pre"></span>float: left;<span style="white-space:pre"></span>margin-left: 86px;<span style="white-space:pre"></span>cursor: pointer;<span style="white-space:pre"></span>background: url(../image/avatarInputDiv.png) 0px 0px no-repeat;}.avatarInputDiv:hover{<span style="white-space:pre"></span>background: url(../image/avatarInputDiv.png) 0px -32px no-repeat;}.avatarInput{<span style="white-space:pre"></span>width: 100%;<span style="white-space:pre"></span>height: 100%;<span style="white-space:pre"></span>opacity: 0;<span style="white-space:pre"></span>z-index: 100;}.saveAvatar{<span style="white-space:pre"></span>width: 82px;<span style="white-space:pre"></span>height: 32px;<span style="white-space:pre"></span>float: left;<span style="white-space:pre"></span>background: url(../image/saveAvatar.png) 0px 0px no-repeat;<span style="white-space:pre"></span>cursor: pointer;<span style="white-space:pre"></span>margin-left: 10px;<span style="white-space:pre"></span>margin-right: 10px;}.saveAvatar:hover{<span style="white-space:pre"></span>background: url(../image/saveAvatar.png) 0px -32px no-repeat;}  

  图中的按钮我都是用的背景图片做的。

JS:(选择图片上传这部分就省略了……)

$('#avatarCrop').Jcrop({<span style="white-space:pre"></span>onChange:showPreview,<span style="white-space:pre"></span>onSelect:showPreview,<span style="white-space:pre"></span>aspectRatio:1,<span style="white-space:pre"></span>setSelect:[0,0,120,120],<span style="white-space:pre"></span>allowSelect: false},function(){<span style="white-space:pre"></span>jcrop_api = this;});function showPreview(coords){<span style="white-space:pre"></span>$('#avatarSize').attr('originX',coords.x);<span style="white-space:pre"></span>$('#avatarSize').attr('originY',coords.y);<span style="white-space:pre"></span>$('#avatarSize').attr('avaWidth',coords.w);        if(parseInt(coords.w) > 0){        <span style="white-space:pre"></span>var originX = $('#avatarSize').attr('originX');<span style="white-space:pre"></span>var originY = $('#avatarSize').attr('originY');<span style="white-space:pre"></span>var avaWidth = $('#avatarSize').attr('avaWidth');<span style="white-space:pre"></span>var image = new Image() ;<span style="white-space:pre"></span>image.src = $('#avatarCrop').attr('src');<span style="white-space:pre"></span>var naturalWidth = image.width;<span style="white-space:pre"></span>var naturalHeight = image.height;<span style="white-space:pre"></span>var width = $('#avatarCrop').width();<span style="white-space:pre"></span>var height = $('#avatarCrop').height();<span style="white-space:pre"></span>var realX = originX * naturalWidth / width;<span style="white-space:pre"></span>var realY = originY * naturalHeight / height;                $("#avatar_preview").css({                    width:Math.round(width * 120 /coords.w) + "px",//预览图片宽度为计算比例值与原图片宽度的乘积                    height:Math.round(height * 120 /coords.w) + "px",  //预览图片高度为计算比例值与原图片高度的乘积                    marginLeft:"-" + Math.round($('#avatar_preview').width() * originX /width) + "px",                    marginTop:"-" + Math.round($('#avatar_preview').height() * originY /height) + "px"                });        }    }//保存头像$('.saveAvatar').click(function(e){<span style="white-space:pre"></span>if ($('#avatarCrop').length == 0) {<span style="white-space:pre"></span>window.location.href="/center";<span style="white-space:pre"></span>return;<span style="white-space:pre"></span>};<span style="white-space:pre"></span>if (!$('#avatarSize').attr('avaWidth')) {<span style="white-space:pre"></span>alert('请选择头像区域！');<span style="white-space:pre"></span>return false;<span style="white-space:pre"></span>};<span style="white-space:pre"></span>var originX = $('#avatarSize').attr('originX');<span style="white-space:pre"></span>var originY = $('#avatarSize').attr('originY');<span style="white-space:pre"></span>var avaWidth = $('#avatarSize').attr('avaWidth');<span style="white-space:pre"></span>var img=$('#avatarCrop')[0].naturalWidth;<span style="white-space:pre"></span>var naturalWidth = $('#avatarCrop')[0].naturalWidth;<span style="white-space:pre"></span>var naturalHeight = $('#avatarCrop')[0].naturalHeight;<span style="white-space:pre"></span>var width = $('#avatarCrop').width();<span style="white-space:pre"></span>var height = $('#avatarCrop').height();<span style="white-space:pre"></span>var realX = originX * naturalWidth / width;<span style="white-space:pre"></span>var realY = originY * naturalHeight / height;<span style="white-space:pre"></span>var realW = avaWidth * naturalWidth / width;<span style="white-space:pre"></span>var imgPath = $('#avatarCrop').attr('src');<span style="white-space:pre"></span>$.get('/avatar/upload',{realX:parseInt(realX),realY:parseInt(realY),realW:parseInt(realW),imgPath:imgPath},function(data){<span style="white-space:pre"></span>var result = JSON.parse(data);<span style="white-space:pre"></span>if (result.flag == 'True') {<span style="white-space:pre"></span>window.location.href="/center";<span style="white-space:pre"></span>}else{<span style="white-space:pre"></span>alert(result.message);<span style="white-space:pre"></span>}<span style="white-space:pre"></span>});});

后台：

class avatarUploadHandler(originWeb):    def get(self):        rsp={'flag':'True','message':'success'}        try:            realX=self.get_argument('realX')            realY=self.get_argument('realY')            realW=self.get_argument('realW')            imgPath=self.get_argument('imgPath')            im = Image.open(os.path.dirname(__file__) + imgPath) #打开图片句柄              box = (int(realX),int(realY),int(realX) + int(realW),int(realY) + int(realW)) #设定裁剪区域             region = im.crop(box)  #裁剪图片，并获取句柄region             todayformat = date.today().strftime('%Y_%m_%d/')            file_dir = os.path.dirname(__file__) + "/"            if not os.path.exists(file_dir + 'static/uploads/avatar/' + todayformat):                os.makedirs(file_dir + 'static/uploads/avatar/' + todayformat)            FILE_NAME = os.path.splitext(imgPath)[-1]            fileName = FILE_NAME            region.save(file_dir + 'static/uploads/avatar/' + todayformat + fileName)#保存图片#修改数据库……            if os.path.exists(os.path.dirname(__file__) + imgPath):#将原图删除                os.remove(os.path.dirname(__file__) + imgPath)        except Exception as error:            print(error)            rsp['flag']='False'            rsp['message']='更新失败，请重试！'        return self.write(dumps(rsp))