<link rel="stylesheet" type="text/css" href="css/jquery.Jcrop.css"/> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.Jcrop.js" type="text/javascript" charset="utf-8"></script>
<div id="userPhoto" class="userPhoto"> <div class="headPhoto"> <input type='hidden' id='userPic' /> <input type="file" class="fileInp" id="userPhotoPicker" value="" accept="image/*" onchange="picsubmit(this)"/> <div id='userPhotoPreview' class="mt10"> <img src="img/mrhead.png" id="userImg"/> </div> input name="logo" type="hidden" value="" id="logo"> </div> </div>
<div class="container" id="userPhotoCut" style="display:none;width: 750px;"> <div class="row"> <div class="span12"> <div class="jc-demo-box"> <div id="img-src" style="text-align:center;max-width:500px;height:auto;"> <p>裁剪区域</p> </div> <div id="userPhotoCutBox" style="position:relative;height:500px;"> <div id="cutArea"></div><p></p> </div> <input type="hidden" id="x" name="x" class="photo-size" /> <input type="hidden" id="y" name="y" class="photo-size" /> <input type="hidden" id="w" name="w" class="photo-size" /> <input type="hidden" id="h" name="h" class="photo-size" /> <input type="hidden" id="photoSrc" name="photoSrc" value=""> <div id="c-btn"> <input type="button" value="保存" class="cut-btn" onclick="checkCoords()"> <input type="button" value="返回" class="cut-btn" onclick="returnPhotoPage()"> </div> <div class="wst-clear"></div> </div> </div> </div> </div>
<script> //建立一個可存取到該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 ; } function picsubmit(obj){ var uploadPhotoSrc; $('#userPhotoCut').show(); $('#userPhoto').hide(); var objUrl = getObjectURL(obj.files[0]) ; //获取图片的路径,该路径不是图片在本地的路径 if (objUrl) { uploadPhotoSrc=objUrl; //将图片路径存入src中,显示出图片 } var cutCode = '<img src="'+uploadPhotoSrc+'" id="target" alt="" style="max-width:500;height:auto;" />'; cutCode += '<div id="preview-pane">'; cutCode += '<div><p align="center">裁剪预览</p>'; cutCode += '<div class="cut-help"><h4>操作帮助</h4>' cutCode += '<p>请在裁剪区域放大缩小及移动选取框,选择要裁剪的范围,裁切宽高比例固定;裁切后的效果为右侧预览图所显示;保存提交后生效。</p></div></div>' cutCode += '<div class="preview-container"><img src="'+uploadPhotoSrc+'" class="jcrop-preview" alt="Preview" /></div></div>'; $('#userPhotoCutBox>p').html(cutCode); $('#photoSrc').val(uploadPhotoSrc); $('#userPic').val(uploadPhotoSrc); //初始化jcrop jcropInit(); $('#uploadMsg').empty().hide(); } var userPic; function checkCoords() { //判断是否有裁剪 if (parseInt($('#w').val())){ /*获取裁剪数据*/ var photoData = {}; photoData.x = $('#x').val(); photoData.y = $('#y').val(); photoData.w = $('#w').val(); photoData.h = $('#h').val(); photoData.photoSrc = $('#photoSrc').val(); $.post('Home/users/editPhoto',photoData,function(data, textStatus){ if(data.status==1) { //将上传的图片路径赋给全局变量 userPic = data.data; $('#userPhotoPreview').html('<img id="userImg" class="ipt" src="'+window.conf.DEFAULT_URL+userPic+'?='+Math.random()+'" />'); $("#logo").val(userPic); $('#userPhotoCut').hide(); $('#userPhoto').css({'display':'inline-block'}); }else{ console.log(data.msg); return false; } }); return true; } alert('请对图片裁剪后再进行提交'); return false; } //返回 function returnPhotoPage(){ $('#userPhotoCut').hide(); $('#userPhoto').css({'display':'inline-block'}); } var jcrop_api; function jcropInit(){ var boundx, boundy, $preview = $('#preview-pane'), $pcnt = $('#preview-pane .preview-container'), $pimg = $('#preview-pane .preview-container img'), xsize = $pcnt.width(), ysize = $pcnt.height(); $('#target').Jcrop({ onChange: updatePreview, onSelect: updatePreview, boxWidth:500, //jcrop加上这个属性图片尺寸再大也不会溢出了 boxHeight:500, //jcrop加上这个属性图片尺寸再大也不会溢出了 aspectRatio: 1, },function(){ // Use the API to get the real image size var bounds = this.getBounds(); //获取图片实际尺寸 boundx = bounds[0]; boundy = bounds[1]; //设置宽度以使文字居中 $('#img-src').css('width',boundx+'px'); // Store the API in the jcrop_api variable jcrop_api = this; jcrop_api.setSelect([0,0,150,150]); // Move the preview into the jcrop container for css positioning $preview.appendTo(jcrop_api.ui.holder); }); function updatePreview(c) { if (parseInt(c.w) > 0) { var rx = xsize / c.w; var ry = ysize / c.h; $pimg.css({ width: Math.round(rx * boundx) + 'px', height: Math.round(ry * boundy) + 'px', marginLeft: '-' + Math.round(rx * c.x) + 'px', marginTop: '-' + Math.round(ry * c.y) + 'px' }); } //设置裁剪的图片数据 $('#x').val(c.x); $('#y').val(c.y); $('#w').val(c.w); $('#h').val(c.h); }; } //资料保存 function dataSave(){ var headlogo=$("#logo").val(); var sellerName=$("#sellerName").val(); var sellerEmail=$("#sellerEmail").val(); var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; if(headlogo==''){ showTip('请先上传头像'); return false; }else if(sellerName=''){ showTip('请输入联系人姓名'); return false; }else if(sellerEmail=''){ showTip('请输入邮箱'); return false; }else if(!myreg.test(sellerEmail)){ showTip('邮箱格式不正确'); return false; }else{ $("#headform").submit(); } } </script>