移动端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自己查看实例下载*/
   /*攻城狮博客不定期更新，有错误会及时更正如有不同见解，请在下方评论。。。，如果采纳，请点赞哦*/