image.png
html
<!--01 修改头像-->
<div class="cell-item m35-img-50 m35-img-52" >
<div class="cell-left">
<ul id="fh715-top-dvh2ul">
<li><img src="../img/m18_banner1.png" > </li>
</ul>
</div>
<div class="cell-right cell-arrow">
<span>修改头像</span>
</div>
</div>
js
<!-- 引入jQuery 2.0+ -->
<script src="../js/jquery-2.2.4.min.js"></script>
<!--<script type="text/javascript" src="../js/jquery.photoClip.js" ></script>-->
<script src="../js/hammer.min.js"></script>
<script src="../js/iscroll-zoom-min.js"></script>
<script src="../js/lrz.all.bundle.js"></script>
<script src="../js/PhotoClip.js"></script>
<script >
//图片截取功能
/*var mmsw=($(window).width()) 截取 宽自定义
pc.size(mmsw, mmsw);*/
$(".m35-img-52").on("click",function(){
$(".pybu").addClass("pybu2")
$(".pybu").removeClass("mms-tu-opacit1")
$(".mms-tu-bjing").addClass("mms-tu-opacit1")
var pc = new PhotoClip('#mmstuclipArea', {
outputSize: 640,
adaptive: ['100%', '57%'],
file: '#mmstufile',
view: '#mmstuview',
ok: '#mmstuclipBtn',
img: '../img/m18_banner1.png',
loadStart: function() {
console.log('开始读取照片');
},
loadComplete: function() {
console.log('照片读取完成');
},
done: function(dataURL) {//截取完成
$(".m35-img-52").attr("src",dataURL)
},
fail: function(msg) {//完成
}
});
// 加载的图片必须要与本程序同源，否则无法截图
//点击截取图片
$("#mmstuclipBtn").on("click",function(){
$(".mms-tu-bjing").removeClass("mms-tu-opacit1")
return false;
})
//点击上传图片
$(".mms-ajax2-dv2").on("click",function(){
var tt=$(".m35-img-52").attr("src")
$("#fh715-top-dvh2ul li img").attr("src",tt)
$(".pybu").addClass("mms-tu-opacit1")
$(".pybu").removeClass("pybu2")
$(".mms-tu-opacit").removeClass("mms-tu-opacit1")
pc.clear();
})
// 点击取消按钮
$(".mms-ajax2 div").on("click",function(){
$(".mms-tu-bjing").addClass("mms-tu-opacit1")
})
pc.clear();
return false;
});
</script>
