<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>修改信息</title> <link rel="stylesheet" href="../../css/reset.css"> <link rel="stylesheet" href="../../css/common.css"> <link rel="stylesheet" href="../../css/modifyInfo.css"> <link rel="stylesheet" href="../../css/cropper.min.css"> <link rel="stylesheet" href="../../css/ImgCropping.css"> <script type="text/javascript" src="../../js/pageSetting.js"></script></head><body> <div id="wrapper"> <img class="returnArrow" src="../../images/leftArrow.png" alt="" onclick="back()"> <div class="title">修改信息</div> <!-- 头像 --> <div class="avatarArea"> <div class="avatarText">头像</div> <!-- 点击头像更换头像 --> <div id="avatarImage"> <img id="finalImg" src=""> </div> <img class="selectAvatar" src="../../images/right.png" alt=""> </div> <!--图片裁剪框 start--> <div style="display: none" class="tailoring-container"> <!-- <div class="black-cloth" onClick="closeTailor(this)"></div> --> <div class="tailoring-content"> <div class="tailoring-content-one"> <label title="上传图片" for="chooseImg" class="l-btn choose-btn"> <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onChange="selectImg(this)"> 选择图片 </label> <div class="close-tailoring" onclick="closeTailor(this)">×</div> </div> <div class="tailoring-content-two"> <div class="tailoring-box-parcel"> <img id="tailoringImg"> </div> <div class="preview-box-parcel"> <p>图片预览：</p> <div class="square previewImg"></div> <div class="circular previewImg"></div> </div> </div> <div class="tailoring-content-three"> <button class="l-btn cropper-reset-btn">复位</button> <button class="l-btn cropper-rotate-btn">旋转</button> <button class="l-btn cropper-scaleX-btn">换向</button> <button class="l-btn sureCut" id="sureCut">确定</button> </div> </div> </div> <!--图片裁剪框 end--> <!-- 昵称 --> <div class="avatarInfoList"> <div class="avatarText">昵称</div> <div class="avatarInputText">请输入您的昵称</div> </div> <!-- 性别 --> <div class="avatarInfoList"> <div class="avatarText">性别</div> <div class="sexRadioList"> <div class="selectSex"> <span class="checkSpan"> <input type="radio" class="Checkbox" id="check1" name="sex"> <label for="check1"></label> </span> <div class="sexText">男</div> </div> <div> <span class="checkSpan"> <input type="radio" class="Checkbox" id="check2" name="sex"> <label for="check2"></label> </span> <div class="sexText">女</div> </div> </div> </div> <!-- 电话 --> <div class="avatarInfoList"> <div class="avatarText">电话</div> <div class="avatarInputText">请输入您的电话号码</div> </div> </div> <!-- 修改按钮 --> <div class="modify">修改</div> <!-- 蒙层区域 --> <div id="blackBg" onClick="closeTailor(this)"></div></body><script src="../../../plugins/bower_components/jquery/dist/jquery.min.js"></script><script type="text/javascript" src="../../js/cropper.min.js"></script><script src="../../js/config.js"></script><script> //弹出图片裁剪框 $("#avatarImage").on("click",function () { $(".tailoring-container").fadeIn(1000); $("#blackBg").fadeIn(1000); }); $("#blackBg").on("click", function() { $(".tailoring-container").fadeOut(1000); $(this).fadeOut(1000); }) //图像上传 function selectImg(file) { if (!file.files || !file.files[0]){ return; } var reader = new FileReader(); reader.onload = function (evt) { var replaceSrc = evt.target.result; //更换cropper的图片 $('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真 } reader.readAsDataURL(file.files[0]); } //cropper图片裁剪 $('#tailoringImg').cropper({ aspectRatio: 1/1,//默认比例 preview: '.previewImg',//预览视图 guides: false, //裁剪框的虚线(九宫格) autoCropArea: 0.8, //0-1之间的数值，定义自动剪裁区域的大小，默认0.8 movable: false, //是否允许移动图片 dragCrop: true, //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域 movable: true, //是否允许移动剪裁框 resizable: true, //是否允许改变裁剪框的大小 zoomable: false, //是否允许缩放图片大小 mouseWheelZoom: false, //是否允许通过鼠标滚轮来缩放图片 touchDragZoom: true, //是否允许通过触摸移动来缩放图片 rotatable: true, //是否允许旋转图片 crop: function(e) { // 输出结果数据裁剪图像。 } }); //旋转 $(".cropper-rotate-btn").on("click",function () { $('#tailoringImg').cropper("rotate", 45); }); //复位 $(".cropper-reset-btn").on("click",function () { $('#tailoringImg').cropper("reset"); }); //换向 var flagX = true; $(".cropper-scaleX-btn").on("click",function () { if(flagX){ $('#tailoringImg').cropper("scaleX", -1); flagX = false; }else{ $('#tailoringImg').cropper("scaleX", 1); flagX = true; } flagX != flagX; }); //裁剪后的处理 $("#sureCut").on("click",function () { if ($("#tailoringImg").attr("src") == null ){ return false; }else{ var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas var base64url = cas.toDataURL('image/png'); //转换为base64地址形式 $("#finalImg").prop("src",base64url);//显示为图片的形式 //关闭裁剪框 closeTailor(); } }); //关闭裁剪框 function closeTailor() { $(".tailoring-container").fadeOut(1000); $("#blackBg").fadeOut(1000); } function back() { window.history.back(-1); } $(document).ready(function() { })</script></html>
小咪咪
系统管理员
╰+哭是因爲堅強的太久メ
还没有评论，来说两句吧...