优化 头像上传改为H5方式，保留旧方式 old=1 (感谢Discuz!L等开发者提供支持）

upload/static/avatar/avatar.js

@@ -0,0 +1,309 @@
+jQuery.noConflict();
+var dwidth = data[data.indexOf('width')+1];
+var dheight = data[data.indexOf('height')+1];
+jQuery('#avatardesigner').width(dwidth-20);
+jQuery('#avatardesigner').height(dheight-25);
+jQuery('#widgetparent').width(dwidth-150);
+jQuery('#widgetparent').height(dheight-25);
+jQuery('#selector').width(150);
+jQuery('#selector').height(150);
+jQuery('#avatarfileselector').width(dwidth-20);
+jQuery('#avatarfileselector').height(dheight-25);
+jQuery('#avatarfile').width(dwidth-20);
+jQuery('#avatarfile').height(dheight-25);
+
+jQuery('#avatarcanvas').attr('width', (dwidth-150));
+jQuery('#avatarcanvas').attr('height', dheight-25);
+jQuery('#avatardisplaycanvas').attr('width', dwidth-20);
+jQuery('#avatardisplaycanvas').attr('height', dheight-25);
+var src = data[data.indexOf('src')+1].replace('images/camera.swf?inajax=1','index.php?m=user&a=uploadavatar');
+$('avatarform').action = src; 
+$('avatarform').target ='uploadframe'; 
+
+jQuery(document).ready(function () {
+    jQuery("#selector")
+        .draggable({ containment: "parent", drag: function (event, ui) { refreshAvatarCanvas(ui.position); }, stop: function() { forceSelectorInsideAvatar(); } })
+        .resizable({ containment: "parent", resize: function (event, ui) { refreshAvatarCanvas(ui.position); }, stop: function() { forceSelectorInsideAvatar(); }  })
+        .hover(
+            function () { jQuery(this).css({ "border-color": "red" }); },
+            function () { jQuery(this).css({ "border-color": "rgba(255, 0, 0, 0.6)" }); }
+        );
+    jQuery("#slider").slider({
+        min: 0,
+        max: 100,
+        value: 50,
+        slide: function(event, ui) {
+            forceSelectorInsideAvatar();
+        }
+    });
+    jQuery("#slider").append("<div style='position: absolute; top: -2px; left: 0px; width: 3px; height: 6px; background-color: black;'>&nbsp;</div>" );
+    jQuery("#slider").append("<div style='position: absolute; top: -2px; left: 50px; width: 3px; height: 6px; background-color: black;'>&nbsp;</div>" );
+    jQuery("#slider").append("<div style='position: absolute; top: -2px; left: 100px; width: 3px; height: 6px; background-color: black;'>&nbsp;</div>" );
+});
+
+function uploadAvatarDone() {
+    var iframe = $('uploadframe'); 
+    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+    if (!iframeDocument.body) return;
+    var imageSrc = iframeDocument.body.innerHTML;
+    if (!imageSrc) return;
+
+    if (imageSrc.indexOf('/')===-1) { // server returns error message
+        if (imageSrc!=-4) { // ie11 bug?: called twice, the value in the second time is -4
+            alert(imageSrc);
+        }
+        return;
+    }    
+    try {
+        var av = $('avatarfile');
+        av.value = '';
+        if(av.value){
+            av.type = "text";
+            av.type = "file";
+        }
+    } catch(e){}
+    jQuery('#avatarfileselector').hide();
+    jQuery('#avatardisplayer').hide();
+    jQuery('#avataradjuster').show();
+    jQuery('#selector').css('left', Math.floor((dwidth-300)/2));
+    jQuery('#selector').css('top', Math.floor((dheight-150)/2));
+    jQuery('#selector').width(150);
+    jQuery('#selector').height(150);    
+    imageSrc += "?" + (new Date());
+    $('avatarimage').src = imageSrc;
+    jQuery("#slider").slider('value', 50);
+}
+
+function showAvatarFileSelector() {
+    $('avatarimage').src = null;
+    clearAvatar();
+    $('avataradjuster').style.display = 'none'; 
+    $('avatarfileselector').style.display = 'block';
+}
+
+function getAvatarDimension() {
+    var factor = jQuery('#slider').slider('option', 'value');
+    var cw = jQuery('#widgetparent').width();
+    var ch = jQuery('#widgetparent').height();
+    var iw = jQuery('#avatarimage').width();
+    var ih = jQuery('#avatarimage').height();
+    var minw = 48;
+    var minh = 48;
+    var midw = Math.min(Math.max(iw, 48), cw);
+    var midh = Math.min(Math.max(ih, 48), ch);
+    var maxw = Math.max(Math.max(iw, 48), cw);
+    var maxh = Math.max(Math.max(ih, 48), ch);
+    var minr = Math.max(minw/iw, minh/ih);
+    var midr = Math.max(midw/iw, midh/ih);
+    var maxr = Math.max(maxw/iw, maxh/ih);
+    if (factor<=50) {
+        r = (minr * (50-factor) + midr * factor)/50;
+    }
+    else {
+        r = (midr * (100-factor) + maxr * (factor-50))/50;
+    }
+    var aw = r*iw;
+    var ah = r*ih;
+    var al = (cw-aw)/2;
+    var at = (ch-ah)/2;
+    var sd = getSelectorDimention();
+    if (aw>cw) al = (cw-aw)/(cw-sd.width)*sd.left;
+    if (ah>ch) at = (ch-ah)/(ch-sd.height)*sd.top;
+    return { left: Math.floor(al), top: Math.floor(at), width: Math.floor(aw), height: Math.floor(ah) };
+}
+
+function clearAvatar() {
+    var canvas = $('avatarcanvas');
+    var cw = canvas.width;
+    var ch = canvas.height;
+    var ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, cw, ch);
+}
+
+function refreshAvatarCanvas(uiposition) { 
+    var canvas = $('avatarcanvas');
+    var cw = canvas.width;
+    var ch = canvas.height;
+    var ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, cw, ch);
+    var ad = getAvatarDimension();
+    var iw = jQuery('#avatarimage').width();
+    var ih = jQuery('#avatarimage').height();
+    var img = $('avatarimage');
+    ctx.drawImage(img, 0,0, iw, ih, ad.left, ad.top, ad.width, ad.height);
+    var sd = getSelectorDimention();    
+    if (uiposition) {
+        sd.left = uiposition.left;
+        sd.top = uiposition.top;
+    }
+    ctx.fillStyle="rgba(0,0,0,0.6)";
+    ctx.fillRect(0, 0, cw, sd.top);
+    ctx.fillRect(sd.left+sd.width, sd.top, cw-sd.left-sd.width, ch-sd.top);
+    ctx.fillRect(0, sd.top+sd.height, sd.left+sd.width, ch-sd.top-sd.height);
+    ctx.fillRect(0, sd.top, sd.left, sd.height);
+}
+
+function getSelectorDimention() {
+    var sl = Math.ceil(jQuery('#selector').position().left);
+    var st = Math.ceil(jQuery('#selector').position().top);
+    var sw = jQuery('#selector').width();
+    var sh = jQuery('#selector').height();
+    return { left: sl, top: st, width: sw, height: sh };
+}
+
+function forceSelectorInsideAvatar() {
+    var sd = getSelectorDimention();
+    var ad = getAvatarDimension();
+    if (sd.width>ad.width) jQuery('#selector').width(ad.width);
+    if (sd.height>ad.height) jQuery('#selector').height(ad.height);
+    sd = getSelectorDimention();
+    if (sd.left<ad.left) jQuery('#selector').css('left', ad.left);
+    if (sd.top<ad.top) jQuery('#selector').css('top', ad.top);
+    if (sd.left+sd.width>ad.left+ad.width) jQuery('#selector').css('left', ad.left+ad.width-sd.width);
+    if (sd.top+sd.height>ad.top+ad.height) jQuery('#selector').css('top', ad.top+ad.height-sd.height);     
+    refreshAvatarCanvas();
+}
+
+function saveAvatar() {
+    var img = $('avatarimage');
+    var sd = getSelectorDimention();
+    var ad = getAvatarDimension();
+    var rl = (sd.left-ad.left)/ad.width;
+    var rt = (sd.top-ad.top)/ad.height;
+    var rw = sd.width/ad.width;
+    var rh = sd.height/ad.height;
+    var iw = jQuery('#avatarimage').width();
+    var ih = jQuery('#avatarimage').height();
+    var sl = rl*iw;
+    var st = rt*ih;
+    var sw = rw*iw;
+    var sh = rh*ih;
+    var tw = sw;
+    var th = sh;
+    if (sw>200 || sh>250) {
+        var r = Math.max(sw/200, sh/250);
+        tw = Math.floor(sw/r);
+        th = Math.floor(sh/r);
+    }          
+    var canvas = document.createElement('canvas');
+    canvas.width = tw;
+    canvas.height = th;
+    var ctx = canvas.getContext("2d");
+    ctx.drawImage(img, sl, st, sw, sh, 0, 0, tw, th);
+    var dataURL = canvas.toDataURL("image/jpeg");
+    jQuery('#avatar1').val(dataURL.substr(dataURL.indexOf(",") + 1));
+
+    var tw = sw;
+    var th = sh;
+    if (sw>120 || sh>120) {
+        var r = Math.max(sw/120, sh/120);
+        tw = Math.floor(sw/r);
+        th = Math.floor(sh/r);
+    }     
+    var canvas = document.createElement('canvas');
+    canvas.width = tw;
+    canvas.height = th;
+    var ctx = canvas.getContext("2d");
+    ctx.drawImage(img, sl, st, sw, sh, 0, 0, tw, th);
+    var dataURL = canvas.toDataURL("image/jpeg");
+    jQuery('#avatar2').val(dataURL.substr(dataURL.indexOf(",") + 1));
+
+    var mwh = Math.min(sw, sh);
+    if (sw>mwh) {
+        sl += Math.floor((sw-mwh)/2);
+        sw = mwh;
+    }
+    if (sh>mwh) {
+        st += Math.floor((sh-mwh)/2);
+        sh = mwh;
+    }
+    var tw = 48;
+    var th = 48;
+    var canvas = document.createElement('canvas');
+    canvas.width = tw;
+    canvas.height = th;
+    var ctx = canvas.getContext("2d");
+    ctx.drawImage(img, sl, st, sw, sh, 0, 0, tw, th);
+    var dataURL = canvas.toDataURL("image/jpeg");
+    jQuery('#avatar3').val(dataURL.substr(dataURL.indexOf(",") + 1));
+
+    var src = $('avatarform').action;
+    $('avatarform').action = src.replace('&a=uploadavatar', '&a=rectavatar&base64=yes');
+    $('avatarform').target='rectframe'; 
+}
+
+function refreshAvatarCanvasForDisplay() {
+    var img = $('avatarimage');
+    var canvas = $('avatardisplaycanvas');
+    var ctx = canvas.getContext("2d");
+    var sd = getSelectorDimention();
+    var ad = getAvatarDimension();
+    var rl = (sd.left-ad.left)/ad.width;
+    var rt = (sd.top-ad.top)/ad.height;
+    var rw = sd.width/ad.width;
+    var rh = sd.height/ad.height;
+    var iw = jQuery('#avatarimage').width();
+    var ih = jQuery('#avatarimage').height();
+    var sl = rl*iw;
+    var st = rt*ih;
+    var sw = rw*iw;
+    var sh = rh*ih;
+    var tw = sw;
+    var th = sh;
+    if (sw>200 || sh>250) {
+        var r = Math.max(sw/200, sh/250);
+        tw = Math.floor(sw/r);
+        th = Math.floor(sh/r);
+    }  
+    var ctl = 10;
+    var ctt = 10;
+    ctx.drawImage(img, sl, st, sw, sh, ctl, ctt, tw, th);
+    ctl += 20 + tw;
+
+    var tw = sw;
+    var th = sh;
+    if (sw>120 || sh>120) {
+        var r = Math.max(sw/120, sh/120);
+        tw = Math.floor(sw/r);
+        th = Math.floor(sh/r);
+    }     
+    ctx.drawImage(img, sl, st, sw, sh, ctl, ctt, tw, th);
+    ctl += 20 + tw;
+
+    var tw = 48;
+    var th = 48;
+    var mwh = Math.min(sw, sh);
+    if (sw>mwh) {
+        sl += Math.floor((sw-mwh)/2);
+        sw = mwh;
+    }
+    if (sh>mwh) {
+        st += Math.floor((sh-mwh)/2);
+        sh = mwh;
+    }
+    ctx.drawImage(img, sl, st, sw, sh, ctl, ctt, tw, th);
+
+    ctx.fillStyle = "black";
+    ctx.font = "bold 16px Arial";
+    ctx.fillText('上传成功!', dwidth - 160,155);
+    ctx.fillStyle = "grey";
+    ctx.font = "bold 12px Arial";
+    ctx.fillText('以上是您头像的三种尺寸', dwidth - 200, 180);        
+}
+
+function rectAvatarDone() {
+    var iframe = $('rectframe'); 
+    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+    if (!iframeDocument.body) return;
+    var res = iframeDocument.body.innerHTML;
+    if (!res) return;
+    if (res=='success') {
+        jQuery('#avatardisplayer').show();
+        refreshAvatarCanvasForDisplay();
+        jQuery('#avataradjuster').hide();
+        jQuery('#avatarfileselector').hide();            
+    }
+    else {
+        alert('上传失败');
+    }
+}

upload/template/default/home/spacecp_avatar.htm

@@ -9,7 +9,7 @@
 				saveUserdata('avatar_redirect', document.referrer);
 				<!--{/if}-->
 			</script>
-			<form method="post" autocomplete="off" action="home.php?mod=spacecp&ac=avatar&ref">
+			<form id="avatarform" enctype="multipart/form-data" method="post" autocomplete="off" action="home.php?mod=spacecp&ac=avatar&ref">
 				<table cellspacing="0" cellpadding="0" class="tfm">
 					<caption>
 						<span id="retpre" class="y xi2"></span>
@@ -30,7 +30,11 @@
 					</caption>
 					<tr>
 						<td>
-							<script type="text/javascript">document.write(AC_FL_RunContent('<!--{echo implode("','", $uc_avatarflash);}-->'));</script>
+							<!--{if !empty($_GET['old'])}-->
+								<script type="text/javascript">document.write(AC_FL_RunContent('<!--{echo implode("','", $uc_avatarflash);}-->'));</script>
+							<!--{else}-->							
+								<!--{template home/spacecp_avatar_body}-->
+							<!--{/if}-->
 						</td>
 					</tr>
 				</table>
@@ -42,7 +46,7 @@
 	<script type="text/javascript">
 		var redirecturl = loadUserdata('avatar_redirect');
 		if(redirecturl) {
-			$('retpre').innerHTML = '<a href="' + redirecturl + '">{lang previous_page}</a>';
+			jQuery('retpre').innerHTML = '<a href="' + redirecturl + '">{lang previous_page}</a>';
 		}
 	</script>
 	<div class="appl">

upload/template/default/home/spacecp_avatar_body.htm

@@ -0,0 +1,47 @@
+<div id="avatardesigner">
+	<div id="avatarfileselector">
+		<input type="file" name="Filedata" id="avatarfile" accept="image/*" onchange="this.form.submit();" />
+	</div>
+	<div id="avataradjuster">
+		<img id="avatarimage" style="visibility: hidden;" onload="forceSelectorInsideAvatar();" />
+		<canvas id="avatarcanvas" style="position: absolute; top: 0px; left: 0px;"></canvas>
+		<div id="widgetparent" style="position: absolute; left: 0px; top: 0px;">
+			<div id="selector" class='ui-widget-content' style="position: absolute; width: 120px; height: 120px; overflow:hidden; cursor: move; border: 1px solid lightgrey; background-color: transparent; background-image: none;">
+			</div>
+		</div>
+		
+		<div class="backfileselectiondiv">
+				<input type="button" name="backfileselection" class="backfileselection" value="Select File" onclick="showAvatarFileSelector();" />
+		</div>
+		
+		<div id="slider" style="height: 0px; position: absolute; right: 9px; top: 105px; width: 100px;"></div>
+		
+		<div class="saveAvatardiv">
+			<input type="submit" name="confirm" value="{lang confirms}" class="saveAvatar" style="" onclick="saveAvatar();" />
+		</div>
+		
+		<input type="hidden" id="avatar1" name="avatar1" />
+		<input type="hidden" id="avatar2" name="avatar2" />
+		<input type="hidden" id="avatar3" name="avatar3" />
+	</div>
+	<div id="avatardisplayer">
+		<canvas id="avatardisplaycanvas"></canvas>
+		
+		<div class="finishbuttondiv">
+				<input type="button" value="{lang finished}" class="finishbutton" onclick="location.reload(true);" />
+		</div>
+	</div>
+</div>														
+
+<script src="static/js/mobile/jquery.min.js?{VERHASH}"></script>
+<script type="text/javascript">
+	jQuery.noConflict();
+	var data = "{echo implode(",", $uc_avatarflash);}".split(',');
+</script>
+
+<link rel="stylesheet" href="static/avatar/avatar.css?{VERHASH}" />							
+<script src="static/avatar/jquery-ui.min.js?{VERHASH}"></script>
+<script src="static/avatar/avatar.js?{VERHASH}"></script>
+
+<iframe name="uploadframe" id="uploadframe" style="display: none;" onload="uploadAvatarDone();"></iframe>
+<iframe name="rectframe" id="rectframe" style="display: none;" onload="rectAvatarDone();"></iframe>

upload/uc_server/control/user.php

@@ -344,7 +344,11 @@ class usercontrol extends base {
 		@header("Expires: 0");
 		@header("Cache-Control: private, post-check=0, pre-check=0, max-age=0", FALSE);
 		@header("Pragma: no-cache");
-		header("Content-type: application/xml; charset=utf-8");
+		if(getgpc('base64', 'G')){
+			header("Content-type: text/html; charset=utf-8");
+		}else{
+			header("Content-type: application/xml; charset=utf-8");
+		}
 		$this->init_input(getgpc('agent'));
 		$uid = $this->input('uid');
 		if(empty($uid)) {
@@ -392,23 +396,35 @@ class usercontrol extends base {
 		$filetype = '.jpg';
 		@unlink(UC_DATADIR.'./tmp/upload'.$uid.$filetype);
 
-		if($success) {
-			return '<?xml version="1.0" ?><root><face success="1"/></root>';
-		} else {
-			return '<?xml version="1.0" ?><root><face success="0"/></root>';
+		if(getgpc('base64', 'G')){
+			if($success) {
+				return "success";
+			} else {
+				return "failure";
+			}
+		}else{
+			if($success) {
+				return '<?xml version="1.0" ?><root><face success="1"/></root>';
+			} else {
+				return '<?xml version="1.0" ?><root><face success="0"/></root>';
+			}
 		}
 	}
 
 
 	function flashdata_decode($s) {
 		$r = '';
-		$l = strlen($s);
-		for($i=0; $i<$l; $i=$i+2) {
-			$k1 = ord($s[$i]) - 48;
-			$k1 -= $k1 > 9 ? 7 : 0;
-			$k2 = ord($s[$i+1]) - 48;
-			$k2 -= $k2 > 9 ? 7 : 0;
-			$r .= chr($k1 << 4 | $k2);
+		if(getgpc('base64', 'G')){
+			$r = base64_decode($s);
+		}else{
+			$l = strlen($s);
+			for($i=0; $i<$l; $i=$i+2) {
+				$k1 = ord($s[$i]) - 48;
+				$k1 -= $k1 > 9 ? 7 : 0;
+				$k2 = ord($s[$i+1]) - 48;
+				$k2 -= $k2 > 9 ? 7 : 0;
+				$r .= chr($k1 << 4 | $k2);
+			}
 		}
 		return $r;
 	}