MCake官网个人中心，【上传头像】，上传图片，头像修改，图片裁剪PhotoClip.js 【母亲节上传照片】

jQuery图片裁剪插件jQuery-photoClip： http://www.jq22.com/jquery-info7428

http://www.jq22.com/yanshi7428

http://www.jq22.com/yanshi15891

 

使用的是PhotoClip.js插件
BD母亲上传图片功能：
PC端：http://edm.mcake.com/fangli/2018-pc/BD-MotherDay/index.html
wap端：http://edm.mcake.com/fangli/2018-wap/BD-MotherDay/index.html

/*!
 * PhotoClip - 一款手势驱动的裁图插件
 * @version v3.3.3
 * @author baijunjie
 * @license MIT
 * 
 * git - https://github.com/baijunjie/PhotoClip.git
 */

 

 

 实现代码如下：2018年BD母亲节

<script type="text/javascript" src="http://www.mcake.com/framework/jquery/jquery.min.js?v=1405950469"></script>
<script src="http://edm.mcake.com/weifengwang/common/flexible.js"></script>
<script src="http://edm.mcake.com/fangli/2018-wap/BD-MotherDay/scripts/swiper.min.js"></script>
<script type="text/javascript" src="http://edm.mcake.com/fangli/2018-wap/BD-MotherDay/scripts/hammer.min.js" ></script>
<script type="text/javascript" src="http://edm.mcake.com/fangli/2018-wap/BD-MotherDay/scripts/lrz.all.bundle.js" ></script>
<script type="text/javascript" src="http://edm.mcake.com/fangli/2018-wap/BD-MotherDay/scripts/iscroll-zoom-min.js" ></script>
<script type="text/javascript" src="http://edm.mcake.com/fangli/2018-wap/BD-MotherDay/scripts/PhotoClip.js" ></script>

 

/*截图上传页面*/
.clipbg{
  position: fixed;
  background: black;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  left: 0;
}
.loading{
  position: absolute;
  top: 40%;
  width: 38%;
  left: 31%;
  height:px2rem(50);
  line-height:px2rem(50);
  z-index: 99999;
  text-align: center;
  color: #ffffff;
  border-radius:0.2rem ;
  background: #9f9f9f;
}
.clipbg #clipArea{
  width: 100%;
  height: 80%;
  margin: auto;

}
.clipbg .footer{
  width: 90%;
  position: fixed;
  left: 5%;
  bottom: 0px;
  text-align: center;
}
.clipbg dl{
  background: #ffffff;
  border-radius:px2rem(10);
  overflow: hidden;
  margin-bottom:px2rem(20);
}
.clipbg dd{
  position: relative;
  height:px2rem(80);
  line-height:px2rem(80);
  border-bottom:1px solid #999999 ; margin: 0; padding: 0;
}
.clipbg .back{
  height:px2rem(80);
  line-height:px2rem(80);
  border-radius:px2rem(10);
  margin-bottom:px2rem(20);
  background: #ffffff;
}
.clipbg dd input{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 11;
  filter:alpha(opacity=0);
  -moz-opacity:0;
  -khtml-opacity: 0;
  opacity: 0;
}



.displaynone{
  display: none;
}

 

<!--图片裁剪-->
<div class="clipbg displaynone">
    <div id="clipArea"></div>
    <div class="loading displaynone">正在载入图片...</div>
    <div class="footer">
        <dl>
            <dd style="background: #fe1041; color: #ffffff;border: none;">打开相册<input type="file" id="file" accept="image/*" ></dd>
            <dd id="clipBtn">完成裁剪</dd>
        </dl>
        <div class="back">取消</div>
    </div>
</div>

 

<script>

    $(".photo-btn").click(function(){
        $(".clipbg").fadeIn()
    })
    var clipArea = new  PhotoClip("#clipArea", {
        size: [300, 300],//裁剪框大小
        outputSize:[0,0],//打开图片大小，[0,0]表示原图大小
        file: "#file",
        rotateFree:false,
        view: "#photo-view", //裁剪预览图片id（需要的自行添加）
        ok: "#clipBtn",
        loadStart: function() { //图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象，并将正在加载的 file 对象作为参数传入。（如果是使用非 file 的方式加载图片，则该参数为图片的 url）
            $(".loading").removeClass("displaynone");
        },
        loadComplete: function() {//图片加载完成的回调函数。this 指向当前 PhotoClip 的实例对象，并将图片的 <img> 对象作为参数传入。
            $(".loading").addClass("displaynone");
            $(".photo-view").removeClass("displaynone");
        },
        done: function(dataURL) { //裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象，会将裁剪出的图像数据DataURL作为参数传入。
            console.log(dataURL);//dataURL裁剪后图片地址base64格式提交给后台处理
            $(".clipbg").fadeOut();
            QuanDialog(3);
        }
    });
    $(".back").click(function(){
        $(".clipbg").fadeOut()
    })
</script>

 

可以修改成微信的头像修改的界面。