var version = '007'; var host = window.location.host; function $$(id){return document.getElementById(id);} function l(s){console.log(s);}; function setCookie(name, value, isForever) { document.cookie = name + "=" + escape(value) + ";domain="+host + (isForever?";expires="+ (new Date(2099,12,31)).toGMTString():""); } function getCookie(name) { var search = name + "="; if(document.cookie.length > 0) { offset = document.cookie.indexOf(search); if(offset != -1) { offset += search.length; end = document.cookie.indexOf(";", offset); if(end == -1) end = document.cookie.length; return unescape(document.cookie.substring(offset, end)); } else return ""; } } var email = $$('email'); var page = 1; if(email){ email.value = 'testFXS@qq.com'; $$('password').value='123456'; }else page=2; try{ document.getElementById("page-intro").innerHTML = "version="+version; }catch(e){} var isAndroid = navigator.userAgent.indexOf('Android')!=-1; var isiPhone = navigator.userAgent.indexOf('iOS')!=-1||navigator.userAgent.indexOf('iPhone')!=-1||navigator.userAgent.indexOf('iPad')!=-1; var isPc = !(isiPhone || isAndroid); function $$(id){return document.getElementById(id);} var px_ratio = typeof(window.devicePixelRatio)=='undefined'?1:window.devicePixelRatio; var page_width = 320;//页面dom的最大宽度 var w = isAndroid ? window.innerWidth : (window.screen.availWidth-30); function resetDpi(evt){ try{ if(navigator.appVersion.indexOf("Android")!=-1 ) { var objs = document.getElementsByTagName("meta"); for(var i=0;i<objs.length; i++) { if(objs[i].name=="viewport"){ var setting = 'target-densitydpi=medium-dpi, width='+page_width+', initial-scale=1, user-scalable=yes, minimum-scale='+(document.body.offsetWidth/page_width*1.129)+', maximum-scale=5.0'; objs[i].content = setting; break; } } } } catch(e) { alert('///////////////////////////////////////////////////error: '+e); } } function setUsePc(f){ if(f) setCookie('usePc', 'true', true); else setCookie('usePc', '', true); window.location.reload(); } var MAX_IMG_SCALE_WIDTH = 520; var MAX_IMG_SCALE_HEIGHT = 720; var IMG_ORIGIN_DATA = ''; var scaleImgCb = scaleCallback; var CUT_AREA_WIDTH = 280; var BASE_SCALE_RATE = CUT_AREA_WIDTH/MAX_IMG_SCALE_WIDTH; var CUT_AREA_HEIGHT = MAX_IMG_SCALE_HEIGHT/MAX_IMG_SCALE_WIDTH*CUT_AREA_WIDTH; var WINDOW_AVIABLE_HEIGHT = window.screen.availHeight-90; if(CUT_AREA_HEIGHT+40>WINDOW_AVIABLE_HEIGHT) WINDOW_AVIABLE_HEIGHT = CUT_AREA_HEIGHT+40; var PREVIEW_TOP = 40; var eventData; var myTchMv; var filename; var user_scale_rate = 1; var image_orgin_width = 0; var image_orgin_height = 0; var ouser_scale_rate = 1; function fileChange(e){ try{ var file = e.target.files[0]; var name = file.name; filename = name; var ext = name.substr(-3).toLocaleLowerCase(); var type = 'image/jpeg'; if(ext=='png'){ type = 'image/png'; }else if(ext=='gif'){ type = 'image/gif'; }else if(ext=='bmp'){ type = 'image/bmp'; } var reader = new FileReader(); reader.onload = function(o) { try{ eventData = o.target.result; var pre = eventData.substr(5); if(isAndroid&&pre.indexOf('image/')==-1) eventData = 'data:'+type+';' +eventData.substr(5); var html = '<div style="width:'+page_width+'px;background-color:#ccc;position:absolute;float:left;left:0;top:0px;height:'+(WINDOW_AVIABLE_HEIGHT)+'px">' +'<div id="previewHead" style="line-height:21px;position:absolute;left:0;top:16px;text-align:center;z-index:1;width:'+page_width+'px">' +' <div style="position: absolute;left: 5px;top: -7px;width: 50px;"><input type="button" value="上传" id="upBtn" onclick="doUpload();"/><br />' +'<img onmousedown="userScaleRate(true,true);if(window.event)window.event.preventDefault();" onmouseup="userScaleRate(true,false)" style="margin-top:6px" src="/resources/images/scale_up.png"></div>' +' <div style="color:#900;font-size:14px;width:200px;margin:-6px auto 0;text-align:center" id="upheadCenter">滑动来调整图片显示区域</div>' +' <div style="position: absolute;right: 5px;top: -7px;width: 50px;"><input type="button" value="取消" onclick="doCancel();"id="cancelBtn"/><br />' +'<img onmousedown="userScaleRate(false,true);if(window.event)window.event.preventDefault();"onmouseup="userScaleRate(false,false)" style="margin-top:6px" src="/resources/images/scale_down.png"></div>' +'</div>' +'<div style="height:'+PREVIEW_TOP+'px;"></div>' +'<div id="previewDivInner" style="border:2px solid #eee;padding:0px;margin:0 auto;width:'+(CUT_AREA_WIDTH) +'px;margin:0 auto;height:'+CUT_AREA_HEIGHT+'px;overflow:hidden;background-color:#000">' +' <img onload="cutImgOnload(this)" id="previewImage" src="'+ eventData+'">' +'</div>' +'</div>'; user_scale_rate = 1; ouser_scale_rate = 1; $$('preview').innerHTML = ""+html+""; $$('upHead').addEventListener('touchmove', function (e) { e.preventDefault(); }, false); }catch(e){ alert("reader.onload="+e); } }; reader.readAsDataURL(file); }catch(e){alert("fileChange="+e);} } function doUpload(){ try{ scaleImg(eventData); tips('压缩图片中……'); $$('upBtn').disabled=true; $$('cancelBtn').disabled=true; }catch(e){alert("doUpload"+e);} } function doCancel(){ if(confirm('确定取消')){ $$('upDiv').innerHTML = ''; document.body.removeChild($$('upDiv')); $$('body-wrapper').style.display = ''; } } function setScrollTop(y){ try{ window.scrollTo(0,y); }catch(e){ alert('setScrollTop='+e); return 5; } } var scaleTo = false; function userScaleRate(isUp,flag){ try{ if(scaleTo||!flag){ clearTimeout(scaleTo); scaleTo = false; if(!flag) return; } ouser_scale_rate = user_scale_rate; if(isUp) user_scale_rate *= 1.02; else user_scale_rate *= 0.98; if( CUT_AREA_WIDTH>BASE_SCALE_RATE*user_scale_rate*image_orgin_width || CUT_AREA_HEIGHT>BASE_SCALE_RATE*user_scale_rate*image_orgin_height || user_scale_rate>1 ){ user_scale_rate = ouser_scale_rate; tips(isUp?"已经到最大":"已经到最小"); }else{ myTchMv.xMove = $$('previewDivInner').scrollLeft; myTchMv.yMove = $$('previewDivInner').scrollTop; updateCutImageShow(); scaleTo = setTimeout( function(){userScaleRate(isUp,flag);}, 150); tips("倍数:"+(BASE_SCALE_RATE*user_scale_rate).toFixed(2)); } }catch(e){ alert('userScaleRate='+e); } } function cutImgOnload(image){ try{ myTchMv = new touch(g('previewDivInner'),slowmv,true,'previewImg'); image_orgin_width = image.width; image_orgin_height = image.height; if(image_orgin_width*BASE_SCALE_RATE*user_scale_rate>CUT_AREA_WIDTH*2 && image_orgin_height*BASE_SCALE_RATE*user_scale_rate>CUT_AREA_HEIGHT*2) user_scale_rate = (CUT_AREA_WIDTH*2)/(image_orgin_width*BASE_SCALE_RATE*user_scale_rate); updateCutImageShow(); }catch(e){ alert('cutImgOnload='+e); } } function tips(s){ $$('upheadCenter').innerHTML = s; } function updateCutImageShow(){ try{ var rate = BASE_SCALE_RATE*user_scale_rate; $$('previewImage').width = image_orgin_width*rate; $$('previewImage').height = image_orgin_height*rate; $$('previewImage').style.width = image_orgin_width*rate; $$('previewImage').style.height = image_orgin_height*rate; }catch(e){ alert('updateCutImageShow='+e); } } function showProgress(loaded, total){ var percent = (loaded / total * 100).toFixed(2) + '%'; var w = (loaded / total ) * 200; tips('<div style="width:200px;border:1px solid #eee;height:18px; line-height:18px;margin:0 auto"><div style="width:'+w+'px;height:18px; background-color:#00a; line-height:18px;text-align:center">'+percent+'</div></div>'); } function scaleCallback(s){ tips('数据大小:'+Math.floor(s.length/1024)+'K'); setTimeout(function(){ var xhr = new XMLHttpRequest(); if (xhr.upload) { // 上传中 xhr.upload.addEventListener("progress", function(e) { showProgress(e.loaded, e.total); }, false); // 文件上传成功或是失败 xhr.onreadystatechange = function(e) { if (xhr.readyState == 4) { if (xhr.status == 200) { tips(xhr.responseText); } else { tips('上传失败'); //self.onFailure(file, xhr.responseText); } $$('upBtn').disabled=false; $$('cancelBtn').disabled=false; } }; // 开始上传 xhr.open("POST", 'http://'+window.location.host+'/php/?m=uploadHairStyle', true); xhr.setRequestHeader("X_FILENAME", filename); var fd = new FormData(); fd.append('hairstyle', s); xhr.send(fd); //xhr.send(eventData); } },1500); } function scaleImg(src) { try{ // 创建一个 Image 对象 var image = new Image(); // 绑定 load 事件处理器,加载完成后执行 image.onload = function(){scaleImgOnload(this);}; image.width = image_orgin_width; image.onerror = function(){ tips(printEvent(arguments[0])); }; // 设置src属性,浏览器会自动加载。 // 记住必须先绑定事件,才能设置src属性,否则会出同步问题。 image.src = src; }catch(e){ alert("scaleImg="+e); } }; function scaleImgOnload(image){ try{ //var image = this; // 获取 canvas DOM 对象 var canvas = document.getElementById("myCanvas"); if(!canvas){ canvas = document.createElement('canvas'); canvas.id = "myCanvas"; canvas.width = MAX_IMG_SCALE_WIDTH; canvas.height = MAX_IMG_SCALE_HEIGHT; //canvas.style.display = 'none'; canvas.style.cssText = 'position:absolute;left:330px;top:0px;'; //$$('preview').style.display = 'none'; $$('preview').appendChild(canvas); } var rate = BASE_SCALE_RATE*user_scale_rate; var ctx = canvas.getContext("2d");s=3; ctx.clearRect(0, 0, MAX_IMG_SCALE_WIDTH, MAX_IMG_SCALE_HEIGHT); var sx=parseInt(myTchMv.xMove/rate); var sy=parseInt(myTchMv.yMove/rate); var sw=parseInt(CUT_AREA_WIDTH/rate); var sh=parseInt(CUT_AREA_HEIGHT/rate); var sParam = ('sx='+sx + ",sy=" + sy +",\nsw="+ sw +",sh="+ sh+",rate="+rate+",move("+myTchMv.xMove+","+myTchMv.yMove+")"); console.log(sParam); ctx.drawImage(image, sx, sy, sw, sh, 0, 0, MAX_IMG_SCALE_WIDTH, MAX_IMG_SCALE_HEIGHT); var data = canvas.toDataURL(); scaleCallback(data);s=8; }catch(e){ alert("scaleImgOnload="+e); } } function uploadInit(){ var upDiv = $$('upDiv'); if(!upDiv){ upDiv = document.createElement("div"); upDiv.id = 'upDiv'; upDiv.style.cssText = 'float:left; background-color:#f9f9f9;'; upDiv.innerHTML = '<div style="margin:0 auto;width:316px;min-height:640px;border:1px solid #eee;background-color:#f9f9f9;border-radius:5px;"><div id="upHead" style="background-color:#aaa;line-height:24px; height:24px; text-indent:12px; font-weight:bold;color:#090">发型上传</div>'+ '<div id="step_2" style="">' +'<input type="file" id="file1" onchange="fileChange(event)"></div><div id="preview" style="float:left;width:'+page_width+'px"></div>' +'</div><div id="dbg"></div></div>'; document.body.appendChild(upDiv); setScrollTop(0); $$('body-wrapper').style.display = 'none'; } upDiv.style.display = ''; } function getRadioParam(name){ var obj; var i = 1; while(true){ obj = $$(name+'_'+(i++)); if(!obj) return''; if(obj.checked) return obj.value; } } function nextStep(){ $$('step_1').style.display='none'; $$('step_2').style.display=''; } isPc = false; try{ var setUsePcVersion = getCookie('usePc'); l('setUsePcVersion='+setUsePcVersion); if(!isPc && !setUsePcVersion){ window.onload = function(e){ resetDpi(e); }; }else if(!isPc) document.getElementById("page-intro").innerHTML = '<a href="javascript:setUsePc(false);">切换到手机版</a> - '+version + ' '+navigator.userAgent; }catch(e){ alert("e="+e); } function printVar(v) { if(v==null) return 'null'; var type = typeof(v); var rtn = ''; switch(type) { case 'boolean': if(v) rtn='true'; else rtn='false'; break; case 'object': var i = 0; if(typeof(v.length)=='undefined') { rtn = '{'; for(var x in v) { if(i==0) rtn+=x+':'+printVar(v[x]); else rtn+=','+x+':'+printVar(v[x]); i++; } rtn += '}'; }else{ rtn = '['; for(var i=0;i<v.length;i++) { if(i==0) rtn+=printVar(v[i]); else rtn+=','+printVar(v[i]); } rtn += ']'; } break; case 'string': rtn = '"'+v.replace(/"/g,'\\"').replace(/\r\n/g,"\\r\\n")+'"'; break; case 'number': default: rtn = v; } return rtn; } function printEvent(evt) { try { var tmp = ''; for(var i in evt) { tmp += i+':'; var v = evt[i]+''; if(v=='[object HTMLDivElement]') { tmp+=' <b>div</b> - '+evt[i].id+'<br/>'; } else if(''+(evt[i])=='[object TouchList]') { tmp+=' <br/> <b>touchlist</b>:<div style="border:1px solid red; margin:1px"> '; for(var x in evt[i]) { if(''+(evt[i][x])=='[object Touch]') { tmp+='<br> ----'+x+':'+' <b>Touch</b><br/><div style="border:1px solid blue;margin:1px">'; for(var y in evt[i][x]) { if(evt[i][x][y]=='[object HTMLDivElement]') { tmp+=' ----'+y+':<b>div</b> - '+evt[i][x][y].id+'<br/>'; }else tmp+='<br> ----'+y+':'+evt[i][x][y]+'<br/>'; } tmp+='</div>'; }else tmp+='<br> '+x+':'+evt[i][x]+'<br/>'; } tmp+='</div>'; }else if(typeof(evt[i])=='number'){ tmp+='<font color="green">'+v+'</font><br/>'; } else tmp+=''+v+'<br/>'; } return tmp; }catch(e){ alert(e); } } function getxy(e){ var a=new Array(); var t=e.offsetTop; var l=e.offsetLeft; var w=e.offsetWidth; var h=e.offsetHeight; while(e=e.offsetParent){ t+=e.offsetTop; l+=e.offsetLeft; } a[0]=w;a[1]=h; a[2]=l;a[3]=t; return a; } function touch(obj,func) { try{ if(arguments.length>2) this.leftRightOnly = arguments[2]; else this.leftRightOnly = false; if(arguments.length>4){//4,5个参数设置后会帮你设定子元素的宽度,帮助滚动效果 var fchild = g(arguments[3]); if(fchild){ var fchildCTagName = arguments[4]; var childs = fchild.getElementsByTagName(fchildCTagName); var w = 0; for(var i=0;i<childs.length;i++){ var xy = getxy(childs[i]); w += xy[0]; } fchild.style.width = w+"px"; } } this.yMove = 0; this.xMove = 0; this.swipe_function[obj.id] = func; this.id = obj.id; if(!this.id){ alert("第一个参数必须有一个id"); return; } this.isPc = navigator.userAgent.indexOf('Windows')!=-1||navigator.platform.indexOf('Mac')!=-1; this.startFlag = false; obj.data = this; if(this.isPc){ this.bind(obj,'mousedown',function(e){this.data.touchstart(e);}); this.bind(obj,'mouseup',function(e){this.data.touchend(e);}); this.bind(obj,'mouseout',function(e){this.data.touchend(e);}); this.bind(obj,'mousemove',function(e){this.data.touchmove(e);}); }else{ this.bind(obj,'touchstart',function(e){this.data.touchstart(e);}); this.bind(obj,'touchend',function(e){this.data.touchend(e);}); this.bind(obj,'touchmove',function(e){this.data.touchmove(e);}); } }catch(e){ alert("touch: "+e); } } touch.prototype.tch_start = {}; touch.prototype.tch_mv = {}; touch.prototype.swipe_function = {}; touch.prototype.bind = function(obj,evt,fun) { if(typeof obj.attachEvent != 'undefined') { obj.attachEvent('on'+evt,fun); }else{ obj.addEventListener(evt,fun,true); } }; touch.prototype.touchstart=function(evt) { try{ var tch; if(this.isPc) tch = evt; else tch = evt['touches'][0]; var id = ""; if(this.isPc) id = this.id; else id = tch.target.id; this.tch_start[id] = [tch.clientX,tch.clientY]; l("this.tch_start[id]="+this.tch_start[id]+",id="+id); this.startFlag = true; evt.preventDefault(); }catch(e){ alert('this.tch_start='+this.tch_start+'<br />'+e); } }; touch.prototype.touchend=function (evt) { try{ if(!this.startFlag) return; if(!this.isPc && (typeof(evt.changedTouches)=='undefined'||evt.changedTouches.length<1)) return; var id = ""; if(this.isPc) id = this.id; else id = evt.changedTouches[0].target.id; var pid = evt.currentTarget.id; var now = this.tch_mv[id]; var start = this.tch_start[id]; l('end= '+start+","+now+",id="+id); var xdiff = now[0]-start[0]; var ydiff = now[1]-start[1]; var f = this.swipe_function[pid]; evt.preventDefault(); this.startFlag = false; if(Math.abs(xdiff)>Math.abs(ydiff)) { if(xdiff<0) { this.swipe(pid,'left',xdiff,f); return; } if(xdiff>0) { this.swipe(pid,'right',xdiff,f); return; } }else{ if(ydiff<0) { this.swipe(pid,'up',ydiff,f); return; } if(ydiff>0) { this.swipe(pid,'down',ydiff,f); return; } } }catch(e){ alert('touchend error='+e); } }; touch.prototype.touchmove=function(evt) { try{ if(!this.startFlag) return; var id,tch; if(this.isPc){ id = this.id; tch = evt; }else{ tch = evt['touches'][0]; id = tch.target.id; } var now = [tch.clientX,tch.clientY]; this.tch_mv[id] = now; if(this.leftRightOnly) { var start = this.tch_start[id]; l('move='+start+","+now+",id="+id); var xdiff = start[1] - now[1]; var ydiff = start[0] - now[0]; var obj = g(this.id); obj.scrollTop += xdiff; obj.scrollLeft += ydiff; start[0] = now[0]; start[1] = now[1]; this.xMove = obj.scrollLeft; this.yMove = obj.scrollTop; tips('偏移:'+this.xMove+","+this.yMove); } evt.preventDefault(); }catch(e){ console.log('touchmove error='+e); //l(printEvent(evt)); } }; touch.prototype.swipe = function(pid,dir,xydiff,func) { } function g(id) { return document.getElementById(id); } var swiping = false; var step = 16; function slowmv(pid,v,v1) { }
直接调用:uploadInit();