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

初步想的步骤是这样的：

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

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

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

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

代码片段

 <div align="center" class="face">    <img src="images/pic06.jpg">/*默认头像*/<pre name="code" class="html">    <form name="form0" id="form0" >/*选取本地图片的input 相对于face盒子定位、宽高100% 透明度0*/

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space:pre"></span><input type="file" name="file0" id="file0" multiple="multiple" /><br></span>

</form> </div>

    提前准备好剪切层的盒子样式和排版

以上截图右侧内容仅供参考，具体代码就是下面这一点，其他的盒子都是插件自己生成的，排版无需添加<img alt="大笑" src="http://static.blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif" />

<div class="img-container">        <img id="img0"  src="">        <div class="close qxooo" >取消</div>      <div class="saveBtn">选取</div></div>

<img class="newImg" src="">

页面需要引入

<script src="common/js/jquery.js"></script>/*jquery的包*/

<script src="js/imagecropper.js"></script>/*图片裁剪的插件*/

<script type="text/javascript">
  
$("#file0").change(function(){
  var objUrl = getObjectURL(this.files[0]) ;
  console.log("objUrl = "+objUrl) ;
  if (objUrl) {
    $("#img0").attr("src", objUrl) ;
    $('.cropper-canvas img').attr('src',objUrl);
    $('.cropper-view-box img').attr('src',objUrl);
  }
  var File=$('#img0').attr('src');
  if(File!=''||File==undefined){
    $('.img-container').show();
  }
}) ;


//建立一個可存取到該file的url
function getObjectURL(file) {
  var url = null ; 
  if (window.createObjectURL!=undefined) { // basic
    url = window.createObjectURL(file) ;
  } else if (window.URL!=undefined) { // mozilla(firefox)
    url = window.URL.createObjectURL(file) ;
  } else if (window.webkitURL!=undefined) { // webkit or chrome
    url = window.webkitURL.createObjectURL(file) ;
  }
  return url ;
}


$('.close').click(function(){
  $('.img-container').hide();
})


function convertToData(url, canvasdata, cropdata, callback) {
  var cropw = cropdata.width; // 剪切的宽
  var croph = cropdata.height; // 剪切的宽
  var imgw = canvasdata.width; // 图片缩放或则放大后的高
  var imgh = canvasdata.height; // 图片缩放或则放大后的高


  var poleft = canvasdata.left - cropdata.left; // canvas定位图片的左边位置
  var potop = canvasdata.top - cropdata.top; // canvas定位图片的上边位置


  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext('2d');


  canvas.width = cropw;
  canvas.height = croph;


  var img = new Image();
  img.src = url;


  img.onload = function() {
    this.width = imgw;
    this.height = imgh;
    // 这里主要是懂得canvas与图片的裁剪之间的关系位置
    ctx.drawImage(this, poleft, potop, this.width, this.height);
    var base64 = canvas.toDataURL('image/jpg', 1);  // 这里的“1”是指的是处理图片的清晰度（0-1）之间，当然越小图片越模糊，处理后的图片大小也就越小
    callback && callback(base64)      // 回调base64字符串
  }
}


$(function(){


  var $image = $('.img-container > img');


  $image.on("load", function() {        // 等待图片加载成功后，才进行图片的裁剪功能
      $image.cropper({  
          aspectRatio: 1 / 1  　　// 1：1的比例进行裁剪，可以是任意比例，自己调整  
      });
  })


  // 点击保存
  $(".saveBtn").on("click", function() {
      var src = $image.eq(0).attr("src");  
      var canvasdata = $image.cropper("getCanvasData");  
      var cropBoxData = $image.cropper('getCropBoxData');  
      convertToData(src, canvasdata, cropBoxData, function(basechar) {
          // 回调后的函数处理  
          $(".newImg").attr("src", basechar);
      // 上传图片获取链接
      ajaxpubilc("/file/downloadBase64Img",{base64Img:basechar},$ajaxPOST, function (data) {  /*接口作用是利用base64解码并建立临时图片文件在下载在本地*/
        if (data.success) {
          var url = data.data;
          // 保存头像地址
          ajaxpubilc("/member/info/saveMemberImageUrl",{imgUrl:url},$ajaxPOST, function (res) {/*通过临时文件上传文件到阿里云获取图片链接*/
            if(res.success == true && res.code == 0) {
              window.location.href='changeInformation3.html';
            }else{
              alert("服务器繁忙");
            }
          });
        } else {
          alert("服务器繁忙");
        }
      });
      });
  })
})
</script>

备注：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自己查看实例下载*/

   /*攻城狮博客不定期更新，有错误会及时更正如有不同见解，请在下方评论。。。，如果采纳，请点赞哦*/