- 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) {}
来源: http://lib.csdn.net/snippet/ios/42669