duhongyu
/
ShuangHui_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
							<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/jquery.Jcrop.min.css" />
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="../js/jquery.Jcrop.min.js"></script>
		<script type="text/javascript">
			var jcrop_api;

			function initJcrop(x, y) {
				$('#panel').Jcrop({
					allowResize: false,
					allowSelect: false,
					onChange: updatePreview,
				}, function() {
					jcrop_api = this;
					jcrop_api.animateTo([x, y, x + 100, y + 100]);
				});
			};

			function updatePreview(c) {
				setHead(c.x, c.y);
			};
		</script>

		<style>
			button span {
				font-size: 17px;
				margin: 0px !important;
			}
			button {
				padding: 0px !important;
				padding-right: 5px !important;
				line-height: 30px !important;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hander-bg">
			<button class="mui-btn mui-pull-left "><span class="mui-icon mui-icon-closeempty" style="font-size: 30px;"></span> 取消
			</button>
			<button class="mui-btn mui-pull-right" onclick="getResults()"><span class="mui-icon mui-icon-checkmarkempty" style="font-size: 30px;"></span> 确定
			</button>
		</header> 
		<div class="mui-content">
			<canvas id="panel"></canvas>
		</div>
		<canvas style="display: none;" id="targetCanvas" width="100" height="100"></canvas>
	</body>
	<script type="text/javascript">
		mui.init();
		var canvas = document.getElementById('panel');
		var h = xm.getQueryString("h") - 44;
		var w = xm.getQueryString("w"); 
		canvas.height = h;
		canvas.width = w;
		initJcrop((w - 100) / 2, (h - 100) / 2);
		var ctx = canvas.getContext('2d');
		var image = new Image();
		image.src = unescape(xm.getQueryString("p"));
		image.onload = function() {
			ctx.drawImage(image, 0, 0, w, h);
			setHead((w - 100) / 2, (h - 100) / 2);
		}

		function setHead(x, y) {
			var temp = ctx.getImageData(x, y, 100, 100);
			var target = document.getElementById('targetCanvas');
			var target = target.getContext('2d');
			target.putImageData(temp, 0, 0);
		}

		function getResults() {
			var p = document.getElementById('targetCanvas').toDataURL();
			var cur = plus.webview.currentWebview();
			var page = plus.webview.getWebviewById(cur.page); 
			if (page) {
				page.evalJS("setHeadImage('" + p + "')");
				cur.close();
			}
		}
	</script>

</html>