PHP+JQUERY+AJAX上传、裁剪图片(2)
<script type="text/javascript"> var imgCut = { imgOpt : { imgPrototypeId : 'imgPrototype', imgViewId: 'imgView', cutBox: 'cut', viewLeft:0, viewTop:0, viewW:340, //裁剪宽 viewH:340, //裁剪高 protoW:440, //原宽 显示原图 protoH:440, //原高 显示原图 Callback : null }, init : function(opts){ $.extend(imgCut.imgOpt, opts); if(!document.getElementById(imgCut.imgOpt.imgPrototypeId) || !document.getElementById(imgCut.imgOpt.imgViewId) || !document.getElementById(imgCut.imgOpt.cutBox)){ alert('配置错误'); return false; } var imgA = document.getElementById(imgCut.imgOpt.imgPrototypeId); var imgB = document.getElementById(imgCut.imgOpt.imgViewId); var cut = document.getElementById(imgCut.imgOpt.cutBox); var imgNew = new Image(); imgNew.src = imgA.src; imgNew.onload = function() { var _this = this; var imgW = _this.width; var imgH = _this.height; imgCut.imgOpt.viewLeft = (imgCut.imgOpt.protoW-imgCut.imgOpt.viewW)/2; imgCut.imgOpt.viewTop = (imgCut.imgOpt.protoH-imgCut.imgOpt.viewH)/2; imgB.src = imgA.src; imgB.style.left = -imgCut.imgOpt.viewLeft+(imgCut.imgOpt.protoW-Number(imgW))/2+'px'; imgB.style.top = -imgCut.imgOpt.viewTop+(imgCut.imgOpt.protoH-Number(imgH))/2+'px'; cut.style.left = imgCut.imgOpt.viewLeft+'px'; cut.style.top = imgCut.imgOpt.viewTop+'px'; cut.style.display = 'block'; imgCut.move(); return imgCut.imgOpt; } imgNew.onerror = function(){ alert('图片加载失败'); } return imgCut.imgOpt; }, move:function(){ var imgB = document.getElementById(imgCut.imgOpt.imgViewId); var imgW = imgB.width; var imgH = imgB.height; var obj = document.getElementById(imgCut.imgOpt.cutBox); var isMove = false; var startPosition = movePosition = {x:0,y:0}; var cutPosition = {l:0,t:0}; obj.onmousedown = function(e){ isMove = true; cutPosition = {l:this.style.left.replace('px',''),t:this.style.top.replace('px','')}; e = e ? e : window.event; startPosition = { x: e.pageX, y: e.pageY } } obj.onmouseup = obj.onmouseout = function(){ isMove = false; } obj.onmousemove = function(e){ if(!isMove){ return} e = e ? e : window.event; movePosition = { x: e.pageX, y: e.pageY } var deltaX = Number(movePosition.x) - Number(startPosition.x) + Number(cutPosition.l); var deltaY = Number(movePosition.y) - Number(startPosition.y) + Number(cutPosition.t); 0 > deltaX && (deltaX = 0); 0 > deltaY && (deltaY = 0); (imgCut.imgOpt.protoW-imgCut.imgOpt.viewW) < deltaX && (deltaX = imgCut.imgOpt.protoW-imgCut.imgOpt.viewW); (imgCut.imgOpt.protoH-imgCut.imgOpt.viewH) < deltaY && (deltaY = imgCut.imgOpt.protoH-imgCut.imgOpt.viewH); imgCut.imgOpt.viewLeft = deltaX; imgCut.imgOpt.viewTop = deltaY; this.style.left = deltaX + 'px'; this.style.top = deltaY + 'px'; imgB.style.left = -imgCut.imgOpt.viewLeft+(imgCut.imgOpt.protoW-Number(imgW))/2+'px'; imgB.style.top = -imgCut.imgOpt.viewTop+(imgCut.imgOpt.protoH-Number(imgH))/2+'px'; } } }; var t = null; function uploadCutImg(replaceUrl,fileElementId,past){ $.ajaxFileUpload ( { url:'/index.php?s=/Pc/Centerall/upload1.html', //用于文件上传的服务器端请求地址 secureuri: false, //一般设置为false fileElementId: fileElementId, //文件上传空间的id属性 <input type="file" id="file" name="file" /> dataType: 'HTML', //返回值类型 一般设置为json success: function (data, status) //服务器成功响应处理函数 { data = $.parseJSON(data); $path = './Uploads/'+data.savepath+data.savename; $("#"+replaceUrl).attr('src',$path); $pastPath = $("#"+past).val(); if($pastPath != ""){ //删掉之前的照片 delImage($pastPath); } $("#"+past).val($path); $("#doImgCut").css("display","inline-block"); t = imgCut.init(); }, error: function (data, status, e)//服务器响应失败处理函数 { alert(e); } } ) } function delImage(path){ $.post("/index.php?s=/Pc/Base/delImage.html",{ path : path }, function(data, textStatus) {}); } $('#doImgCut').on('click',function(){ var ileft=t.viewLeft; var itop=t.viewTop; var iw=t.viewW; var ih=t.viewH; var jqimg=$("#imgPrototype").attr('src'); $.ajax({ url: "{:U('Centerall/uploadImgCut')}", type: 'post', cache: false, async: true, /*true异步执行,false*/ data: {'ileft':ileft,'itop':itop,'iw':iw,'ih':ih,'jqimg':jqimg}, dataType: 'json', beforeSend:function(){ tusi("正在截图中...");}, success:function(data) { if(data.state){ $("#vipuid").attr('src',data.url); } $("#doImgCut").css("display","none"); tusi(data.msg); }, error : function() { tusi("系统错误!"); } }); });