Html5手机移动端头像上传裁剪插件Demo实现
2016-08-25 13:26:51  By: shinyuu

• shinyuu
• HTML5开发
• 9
• 30171
• 101

DD博客以前分享过PC端的图片剪裁和头像上传的功能、那么今天分享一个手机端Web App的Html5拍照上传头像裁剪代码、此场景是一款手机端经常使用的图片上传裁剪做头像特效、一般做Web App的都会使用、今天分享出来、希望对大家有用、效果图如下

Html代码

<!--头部-->
<div id="user_head">
    <a id="left_ico" href="javascript:history.go(-1);">
        <i class="icon iconfont">&#xe645;</i>
    </a>
    <span>个人头像</span>
    <a id="s_dpage" href="javascript:void(0);">
         <i class="icon iconfont">&#xe633;</i> 
    </a>
</div>

<a href="javascript:void(0);" class="logoBox" id="logoBox">
    <img id="bgl" src="images/userico.jpg" width="100%">
</a>

<div class="htmleaf-container">
    <div id="clipArea"></div>
    <div id="view"></div>
</div>

<div class="btn-1">
    <button>确认更换</button>
</div>

<div id="dpage">
    <a href="javascript:void(0);">
        <input type="button" name="file" class="button" value="拍照">
    	  <input id="file" type="file" onchange="javascript:setImagePreview();" accept="image/*" multiple  />
    </a>
    <a href="javascript:void(0);"><input type="button" name="file" class="button" value="选取照片">
  	   <input id="file" type="file" onchange="javascript:setImagePreview();" accept="image/*" multiple  /></a>
    <a href="javascript:void(0);" class="qx"><button id="clipBtn">截取图片</button></a>
</div>

setImagePreview代码

function setImagePreview() {
    var preview, img_txt, localImag, file_head = document.getElementById("file_head"),
        picture = file_head.value;
    if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确，请重新选择！"),
        !1;
    if (preview = document.getElementById("preview"), file_head.files && file_head.files[0]) preview.style.display = "block",
        preview.style.width = "100px",
        preview.style.height = "100px",
        preview.src = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(file_head.files[0]);
    else {
      file_head.select(),
          file_head.blur(),
          img_txt = document.selection.createRange().text,
          localImag = document.getElementById("localImag"),
          localImag.style.width = "100px",
          localImag.style.height = "100px";
      try {
        localImag.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)",
            localImag.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img_txt
      } catch(f) {
        return alert("您上传的图片格式不正确，请重新选择！"),
            !1
      }
      preview.style.display = "none",
          document.selection.empty()
    }
    return document.getElementById("DivUp").style.display = "block",
           !0
}

html5手机端头像剪裁上传实现源代码下载链接: html5 移动端头像上传 密码: fn6s

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛