上传头像插件用途：帮助开发者快速开发上传头像功能，并可剪切插件。资源：请在此处查看特定资源。大致思路如下：首先是upload（本地上传功能），然后获取图片的地址。获取图片地址后，截取图片（这里推荐插件）。点这里，具体使用方法我就不赘述了。抓取图片后，需要将抓取的文件转换成一个大的二进制文件。$('#image').cropper('getCroppedCanvas').toBlob();调用接口并上传大二进制文件。直接上传代码：首先导入如下文件cropper.js【点击这里】(https://github.com/fengyuanchen/cropperjs)具体业务代码$(function(){varURL=window.URL||window.webkitURL;var$image=$('#image');var$rotate=$('#userImg_rotate');var$reUpload=$('#userImg_reUpload');var$zoomOut=$('#userImg_zoomOut');var$zoomIn=$('#userImg_zoomIn');var$save=$('#userImg_save');varcroppable=false;var$previews=$('.userImg_preview');varoptions={aspectRatio:1,viewMode:1、内置：function(){croppable=true;},build:function(e){var$clone=$(this).clone();$clone.css({display:'block',width:'100%',minWidth:0,minHeight:0,maxWidth:'无',maxHeight:'无'});$previews.css({width:'100%',overflow:'hidden'}).html($clone);},crop:function(e){varimageData=$(this).cropper('getImageData');varpreviewAspectRatio=e.width/e.height;$previews.each(function(){var$preview=$(this);varpreviewWidth=$preview.width();varpreviewHeight=previewWidth/previewAspectRatio;varimageScaledRatio=e.width/previewWidth;$preview.height(previewHeight).find('img').css({宽度：imageData.naturalWidth/imageScaledRatio，高度：imageData.naturalHeight/imageScaledRatio，marginLeft：-e.x/imageScaledRatio，marginTop：-e.y/imageScaledRatio});});}};varoriginalImageURL=$scope.userInfo_imgUrl;变种上传图片网址；$scope.initCropper=function(){//初始化$image.attr('src',$scope.userInfo_imgUrl).cropper(options);};//旋转$rotate.on('click',function(){$image.cropper('rotate',90);});//缩放$zoomOut.on('click',function(){$image.cropper('zoom',-0.1);});//放大$zoomIn.on('click',function(){$image.cropper('zoom',0.1);});//移动/*$move.on('click',function(){$image.cropper('setDragMode');});*///重新上传$reUpload.on('click',function(){$image.cropper('destroy').attr('src',$scope.userInfo_imgUrl).cropper(options);if(uploadedImageURL){URL.revokeObjectURL(uploadedImageURL);uploadedImageURL='';}});//键盘$(document.body).on('keydown',function(e){if(!$image.data('cropper')||this.scrollTop>300){return;}switch(e.which){case37:e.preventDefault();$image.cropper('move',-1,0);break;case38:e.preventDefault();$image.cropper('move',0,-1);中断;案例39:e.preventDefault();$image.cropper('move',1,0);中断;案例40:e.preventDefault();$image.cropper('move',0,1）;休息;}}）;//剪切和确定上传图片$save.on('click',function(){common.Loading.show();$('#image').cropper('getCroppedCanvas').toBlob(function(blob){varformData=newFormData();formData.append('photoFile',blob);//在此处将后端写入上传接口$.ajax(API_URL+'',{method:"POST",data:formData,headers:{'auth-token':common.Cookie.get('token')},processData:false,contentType:false,success:function(res){common.Loading.hide();common.Toast.show('头像上传成功！');try{$scope.$apply(function(){$scope.isShowUnCompleteInfoBox=false;$scope.isShowCompleteInfoBox=false;$scope.userInfo_imgUrl=res.data;})}catch(err){console.log(err)}},error:function(){common.Toast.show('头像上传失败！');}});});})//上传图片，这里上传本地图片并获取本地图片的Pathvar$inputImage=$('#inputImage');if(URL){$inputImage.change(function(){varfiles=this.files;varfile;if(!$image.data('cropper')){return;}if(files&&files.length){file=files[0];if(/^image\/\w+$/.test(file.type)){if(uploadedImageURL){URL.revokeObjectURL(uploadedImageURL);}uploadedImageURL=URL.createObjectURL(file);$image.cropper('destroy').attr('src',uploadedImageURL).cropper（选项）；$inputImage.val('');}else{common.Toast.show('上传前请选择图片！')}}});}else{$inputImage.prop('disabled',true).parent().addClass('disabled');}});
