移动端h5头像上传、头像裁切、上传图片

初步想的步骤是这样的：

一、点击头像区域选择本地图片

二、显示被选本地图片显示裁剪选取框

三、确认选取后，上传到阿里云返回路径

四、初始点击区域显示裁剪完成的图片

代码片段

 

    /*默认头像*/
    
/*选取本地图片的input 相对于face盒子定位、宽高100% 透明度0*/
 
  
			
  
 
  
     提前准备好剪切层的盒子样式和排版 
  
 
  
 
  
 
  
以上截图右侧内容仅供参考，具体代码就是下面这一点，其他的盒子都是插件自己生成的，排版无需添加
 
  
  
        
      
取消
      
选取
 
  

 
  
 页面需要引入 
  
 
  
/*jquery的包*/
 
  
/*图片裁剪的插件*/
 
  

 
  

 
  
备注：ajaxpubilc方法源码封上
 
  
function ajaxpubilc(url,data,posttype,callback){
var loginrel= $ajaxurl+'/'+'login.html';


if(data==undefined){
data = {};
}
data["access_token"]=tooken;
$.ajax({
url:$ajaxurl+url,
type:posttype, /*$ajaxPOST*/
dataType:'json',
data:data,
success: function(msg){
callback(msg);
},
error:function(msg){


var data = jQuery.parseJSON(msg.responseText);




if(data.error==undefined){
alert(msg);
}else{
                 if(msg.status==401){
$.removeCookie("access_token");
                     window.location='loginnew.html'
                 }
}
}
})
 }
 
  
   /*源码请去http://m.enflux.com.cn/html/user/changeInformation3.html自己查看实例下载*/
 
  
   /*攻城狮博客不定期更新，有错误会及时更正如有不同见解，请在下方评论。。。，如果采纳，请点赞哦*/