weiyong
/
201906G11


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508
							<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page isELIgnored="false"%>
<!DOCTYPE html>

<head>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport"
	content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<title></title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/correct.css" />
<style>
#background {
	cursor: url('${pageContext.request.contextPath}/img/cursor.png'), auto;
}

#annotated {
	background: url('${pageContext.request.contextPath}/img/annotated.png')
		no-repeat right;
}

.annotated:after {
	position: absolute;
	background: url('${pageContext.request.contextPath}/img/annotated.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	content: '';
	width: 40px;
	height: 40px;
	bottom: 0;
	right: 0;
}
</style>
</head>

<body>
	<div class="header">
		<div class="img_button img_pencil active">
			<button id="pencil">
		</div>
		<div class="line"></div>
		<div class="color_select">
			<div id="color_fadeToggle">
				<ul class="color_list">
					<li data-value="#000000" style="background: #000000"></li>
					<li data-value="#424242" style="background: #424242"></li>
					<li data-value="#626262" style="background: #626262"></li>
					<li data-value="#9d9d95" style="background: #9d9d95"></li>
					<li data-value="#c7c7c7" style="background: #c7c7c7"></li>
					<li data-value="#efefef" style="background: #efefef"></li>
					<li data-value="#f7f7f7" style="background: #f7f7f7"></li>
					<li data-value="#ffffff" style="background: #ffffff"></li>
					<li data-value="#ff0000" style="background: #ff0000"></li>
					<li data-value="#ff9d00" style="background: #ff9d00"></li>
					<li data-value="#ffff00" style="background: #ffff00"></li>
					<li data-value="#00ff00" style="background: #00ff00"></li>
					<li data-value="#00ffff" style="background: #00ffff"></li>
					<li data-value="#0000ff" style="background: #0000ff"></li>
					<li data-value="#9d00ff" style="background: #9d00ff"></li>
					<li data-value="#ff00ff" style="background: #ff00ff"></li>
					<li data-value="#f7c7cf" style="background: #f7c7cf"></li>
					<li data-value="#ffebcb" style="background: #ffebcb"></li>
					<li data-value="#ffebcb" style="background: #ffebcb"></li>
					<li data-value="#d7efd7" style="background: #d7efd7"></li>
					<li data-value="#d3dbe7" style="background: #d3dbe7"></li>
					<li data-value="#cfe7f7" style="background: #cfe7f7"></li>
					<li data-value="#d3dbe7" style="background: #d3dbe7"></li>
					<li data-value="#e7d7df" style="background: #e7d7df"></li>
					<li data-value="#e79d9d" style="background: #e79d9d"></li>
					<li data-value="#ffc79d" style="background: #ffc79d"></li>
					<li data-value="#ffe79d" style="background: #ffe79d"></li>
					<li data-value="#b5d7a5" style="background: #b5d7a5"></li>
					<li data-value="#a5c7cf" style="background: #a5c7cf"></li>
					<li data-value="#9dc7ef" style="background: #9dc7ef"></li>
					<li data-value="#b5a5d7" style="background: #b5a5d7"></li>
					<li data-value="#d7a5bd" style="background: #d7a5bd"></li>
					<li data-value="#e76262" style="background: #e76262"></li>
					<li data-value="#f7ad6a" style="background: #f7ad6a"></li>
					<li data-value="#ffd762" style="background: #ffd762"></li>
					<li data-value="#95bd7a" style="background: #95bd7a"></li>
					<li data-value="#72a5ad" style="background: #72a5ad"></li>
					<li data-value="#6aaddf" style="background: #6aaddf"></li>
					<li data-value="#8d7ac7" style="background: #8d7ac7"></li>
					<li data-value="#c77aa5" style="background: #c77aa5"></li>
					<li data-value="#cf0000" style="background: #cf0000"></li>
					<li data-value="#e79538" style="background: #e79538"></li>
					<li data-value="#efc730" style="background: #efc730"></li>
					<li data-value="#6aa54a" style="background: #6aa54a"></li>
					<li data-value="#4a7a8d" style="background: #4a7a8d"></li>
					<li data-value="#385c7" style="background: #3885c7"></li>
					<li data-value="#624aa5" style="background: #624aa5"></li>
					<li data-value="#a54a7a" style="background: #a54a7a"></li>
					<li data-value="#9d0000" style="background: #9d0000"></li>
					<li data-value="#b56208" style="background: #b56208"></li>
					<li data-value="#bd9500" style="background: #bd9500"></li>
					<li data-value="#387a20" style="background: #387a20"></li>
					<li data-value="#104a5a" style="background: #104a5a"></li>
					<li data-value="#085295" style="background: #085295"></li>
					<li data-value="#301872" style="background: #301872"></li>
					<li data-value="#721842" style="background: #721842"></li>
					<li data-value="#620000" style="background: #620000"></li>
					<li data-value="#7a3800" style="background: #7a3800"></li>
					<li data-value="#285218" style="background: #285218"></li>
					<li data-value="#285218" style="background: #285218"></li>
					<li data-value="#083038" style="background: #083038"></li>
					<li data-value="#003062" style="background: #003062"></li>
					<li data-value="#20104a" style="background: #20104a"></li>
					<li data-value="#4a1030" style="background: #4a1030"></li>
				</ul>
			</div>
		</div>
		<input type="range" max="15" min="1" id="range" />
		<div class="line"></div>
		<div class="img_button img_empty">
			<button id="clear_canvas">
		</div>
		<div class="img_button img_save">
			<button id="save_canvas">
		</div>
		<div class="img_button img_download">
			<button id="download">
		</div>
	</div>

	<div class="sidebar_left">
		<ul class="img_select">
			<c:forEach var="i" begin="1" end="${correct_number}">
				<li id="img_${i}" class=""><img
					src="${pageContext.request.contextPath}/Document/correct/img/${correct}/${i}.png"
					id="annotated" />
					</form></li>

			</c:forEach>
		</ul>
	</div>
	<div class="main">
		<div class="correct">
			<div id="background"
				style="background-image:url('${pageContext.request.contextPath}/Document/correct/img/${correct}/1.png'); background-size: 100% 100%; background-repeat: no-repeat;">
				<canvas id="canvas"></canvas>
			</div>

		</div>

	</div>
	<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"
		type="text/javascript" charset="utf-8"></script>
	<script src="${pageContext.request.contextPath}/js/correct.js"
		type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//获取id为background的对象
		var background = document.getElementById("background")
		<c:forEach var="a" begin="1" end="${correct_number}">
		//a代表当前条目的变量名称
		$("#img_${a}")
				.click(
						function() {

							//获取批注的base64编码
							var image = new Image();
							image.src = canvas.toDataURL("image/png");//得到图片的BASE64码
							var abc = image.src
							//base64 编码中含有大量加号，而+在 URL 传递时会被当成空格
							var base64_ = abc.replace(/\+/g, '%2B');

							// 获取id为correct中的backgroundImage值
							var a = document.getElementById("background").style.backgroundImage;
							// 通过正则表达式得知当前正在批注的图片
							var str = a.match(/([^/]+).png/)[1];
							// 替换id为background对象的背景图片
							document.getElementById("background").style.cssText = "background-image: url(${pageContext.request.contextPath}/Document/correct/img/${correct}/${a}.png);background-size: 100% 100%;background-repeat: no-repeat;"

							// 通过ajax将获取到的base64以post方式传输到后台处理
							var xmlhttp;
							if (window.XMLHttpRequest) {
								//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
								xmlhttp = new XMLHttpRequest();
							} else {
								// IE6, IE5 浏览器执行代码
								xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
							}
							xmlhttp.open("POST", "Encode", true);
							xmlhttp.setRequestHeader("Content-Type",
									"application/x-www-form-urlencoded");
							xmlhttp.send("img_name=" + str + "&base64="
									+ base64_);
							//消除批注
							cvs.clearRect(0, 0, canvas.width, canvas.height);
						});
		</c:forEach>
		$(function() {
			var xmlhttp;
			if (window.XMLHttpRequest) {
				//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
				xmlhttp = new XMLHttpRequest();
			} else {
				// IE6, IE5 浏览器执行代码
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.open("POST", "Magic", true);
			xmlhttp.setRequestHeader("Content-Type",
					"application/x-www-form-urlencoded");
			xmlhttp.send("number=" + ${correct_number});

		});
	</script>
</body>

</html>

<!--  
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>javascript结合html5 canvas实现的涂鸦板 - 分享JavaScript-sharejs.com</title> 
<meta name="Copyright" content="JavaScript分享网 http://www.sharejs.com/" /> 
<meta name="description" content="javascript结合html5 canvas实现的涂鸦板,JavaScript分享网，js脚本，网页特效，网页模板，png图标，矢量图下载" /> 
<meta content="JavaScript,分享,JavaScript代码,Ajax,jQuery,网页模板,PNG图标，矢量图" name="keywords" /> 
</head> 
<body> 
<style> 
*{margin:0;padding:0;} 
.fa{width:740px;margin:0 auto;} 
.top{margin:20px 0;} 
.top input{width:25px;height:25px;border:1px solid #fff;border-radius:4px;background:#ddd;} 
.top .i1{background:#000000;} 
.top .i2{background:#FF0000;} 
.top .i3{background:#80FF00;} 
.top .i4{background:#00FFFF;} 
.top .i5{background:#808080;} 
.top .i6{background:#FF8000;} 
.top .i7{background:#408080;} 
.top .i8{background:#8000FF;} 
.top .i9{background:#CCCC00;} 
#canvas{background:#eee;cursor:default;} 
.font input{font-size:14px;} 
.top .grea{background:#aaa;} 
</style> 
 
<body> 
<div class="fa"> 
<div class="top"> 
<div id="color"> 
请选择画笔颜色： 
<input class="i1" type="button" value="" /> 
<input class="i2" type="button" value="" /> 
<input class="i3" type="button" value="" /> 
<input class="i4" type="button" value="" /> 
<input class="i5" type="button" value="" /> 
<input class="i6" type="button" value="" /> 
<input class="i7" type="button" value="" /> 
<input class="i8" type="button" value="" /> 
<input class="i9" type="button" value="" /> 
</div> 
<div class="font" id="font"> 
请选择画笔的宽度： 
<input type="button" value="细" /> 
<input type="button" value="中" class="grea"/> 
<input type="button" value="粗" /> 
</div> 
<div> 
<span id="error">如果有错误，请使用橡皮擦：</span> 
<input id="eraser" style="width:60px;font-size:14px;"type="button" value="橡皮擦" > </input>
</div> 
<input id="clear" type="button" value="清除画布" style="width:80px;"/> 
<input id="revocation" type="button" value="撤销" style="width:80px;"/> 
<input id="imgurl" type="button" value="导出图片路径" style="width:85px;"/> 
</div> 
<canvas id="canvas" width="740" height="420">您的浏览器不支持 canvas 标签</canvas> 
<div id="div1"></div> 
</div> 
<div id="html"> 
</div> 
<script> 
(function(){ 
var paint={ 
init:function() 
{ 
this.load(); 
}, 
load:function() 
{ 
this.x=[];//记录鼠标移动是的X坐标 
this.y=[];//记录鼠标移动是的Y坐标 
this.clickDrag=[]; 
this.lock=false;//鼠标移动前，判断鼠标是否按下 
this.isEraser=false; 
//this.Timer=null;//橡皮擦启动计时器 
//this.radius=5; 
this.storageColor="#000000"; 
this.eraserRadius=15;//擦除半径值 
this.color=["#000000","#FF0000","#80FF00","#00FFFF","#808080","#FF8000","#408080","#8000FF","#CCCC00"];//画笔颜色值 
this.fontWeight=[2,5,8]; 
this.$=function(id){return typeof id=="string"?document.getElementById(id):id;}; 
this.canvas=this.$("canvas"); 
if (this.canvas.getContext) { 
} else { 
alert("您的浏览器不支持 canvas 标签"); 
return; 
} 
this.cxt=this.canvas.getContext('2d'); 
this.cxt.lineJoin = "round";//context.lineJoin - 指定两条线段的连接方式 
this.cxt.lineWidth = 5;//线条的宽度 
this.iptClear=this.$("clear"); 
this.revocation=this.$("revocation"); 
this.imgurl=this.$("imgurl");//图片路径按钮 
this.w=this.canvas.width;//取画布的宽 
this.h=this.canvas.height;//取画布的高 
this.touch =("createTouch" in document);//判定是否为手持设备 
this.StartEvent = this.touch ? "touchstart" : "mousedown";//支持触摸式使用相应的事件替代 
this.MoveEvent = this.touch ? "touchmove" : "mousemove"; 
this.EndEvent = this.touch ? "touchend" : "mouseup"; 
this.bind(); 
}, 
bind:function() 
{ 
var t=this; 
/*清除画布*/ 
this.iptClear.onclick=function() 
{ 
t.clear(); 
}; 
/*鼠标按下事件，记录鼠标位置，并绘制，解锁lock，打开mousemove事件*/ 
this.canvas['on'+t.StartEvent]=function(e) 
{ 
var touch=t.touch ? e.touches[0] : e; 
var _x=touch.clientX - touch.target.offsetLeft;//鼠标在画布上的x坐标，以画布左上角为起点 
var _y=touch.clientY - touch.target.offsetTop;//鼠标在画布上的y坐标，以画布左上角为起点 
if(t.isEraser) 
{ 
/* 
t.cxt.globalCompositeOperation = "destination-out"; 
t.cxt.beginPath(); 
t.cxt.arc(_x, _y,t.eraserRadius, 0, Math.PI * 2); 
t.cxt.strokeStyle = "rgba(250,250,250,0)"; 
t.cxt.fill(); 
t.cxt.globalCompositeOperation = "source-over"; 
*/ 
t.resetEraser(_x,_y,touch); 
}else 
{ 
t.movePoint(_x,_y);//记录鼠标位置 
t.drawPoint();//绘制路线 
} 
t.lock=true; 
}; 
/*鼠标移动事件*/ 
this.canvas['on'+t.MoveEvent]=function(e) 
{ 
var touch=t.touch ? e.touches[0] : e; 
if(t.lock)//t.lock为true则执行 
{ 
var _x=touch.clientX - touch.target.offsetLeft;//鼠标在画布上的x坐标，以画布左上角为起点 
var _y=touch.clientY - touch.target.offsetTop;//鼠标在画布上的y坐标，以画布左上角为起点 
if(t.isEraser) 
{ 
//if(t.Timer)clearInterval(t.Timer); 
//t.Timer=setInterval(function(){ 
t.resetEraser(_x,_y,touch); 
//},10); 
} 
else 
{ 
t.movePoint(_x,_y,true);//记录鼠标位置 
t.drawPoint();//绘制路线 
} 
} 
}; 
this.canvas['on'+t.EndEvent]=function(e) 
{ 
/*重置数据*/ 
t.lock=false; 
t.x=[]; 
t.y=[]; 
t.clickDrag=[]; 
clearInterval(t.Timer); 
t.Timer=null; 
}; 
this.revocation.onclick=function() 
{ 
t.redraw(); 
}; 
this.changeColor(); 
this.imgurl.onclick=function() 
{ 
t.getUrl(); 
}; 
/*橡皮擦*/ 
this.$("eraser").onclick=function(e) 
{ 
t.isEraser=true; 
t.$("error").style.color="red"; 
t.$("error").innerHTML="您已使用橡皮擦！"; 
}; 
}, 
movePoint:function(x,y,dragging) 
{ 
/*将鼠标坐标添加到各自对应的数组里*/ 
this.x.push(x); 
this.y.push(y); 
this.clickDrag.push(y); 
}, 
drawPoint:function(x,y,radius) 
{ 
for(var i=0; i < this.x.length; i++)//循环数组 
{ 
this.cxt.beginPath();//context.beginPath() , 准备绘制一条路径 
if(this.clickDrag[i] && i){//当是拖动而且i!=0时，从上一个点开始画线。 
this.cxt.moveTo(this.x[i-1], this.y[i-1]);//context.moveTo(x, y) , 新开一个路径，并指定路径的起点 
}else{ 
this.cxt.moveTo(this.x[i]-1, this.y[i]); 
} 
this.cxt.lineTo(this.x[i], this.y[i]);//context.lineTo(x, y) , 将当前点与指定的点用一条笔直的路径连接起来 
this.cxt.closePath();//context.closePath() , 如果当前路径是打开的则关闭它 
this.cxt.stroke();//context.stroke() , 绘制当前路径 
} 
}, 
clear:function() 
{ 
this.cxt.clearRect(0, 0, this.w, this.h);//清除画布，左上角为起点 
}, 
redraw:function() 
{ 
/*撤销*/ 
this.cxt.restore(); 
}, 
preventDefault:function(e){ 
/*阻止默认*/ 
var touch=this.touch ? e.touches[0] : e; 
if(this.touch)touch.preventDefault(); 
else window.event.returnValue = false; 
}, 
changeColor:function() 
{ 
/*为按钮添加事件*/ 
var t=this,iptNum=this.$("color").getElementsByTagName("input"),fontIptNum=this.$("font").getElementsByTagName("input"); 
for(var i=0,l=iptNum.length;i<l;i++) 
{ 
iptNum[i].index=i; 
iptNum[i].onclick=function() 
{ 
t.cxt.save(); 
t.cxt.strokeStyle = t.color[this.index]; 
t.storageColor=t.color[this.index]; 
t.$("error").style.color="#000"; 
t.$("error").innerHTML="如果有错误，请使用橡皮擦："; 
t.cxt.strokeStyle = t.storageColor; 
t.isEraser=false; 
} 
} 
for(var i=0,l=fontIptNum.length;i<l;i++) 
{ 
t.cxt.save(); 
fontIptNum[i].index=i; 
fontIptNum[i].onclick=function() 
{ 
t.changeBackground(this.index); 
t.cxt.lineWidth = t.fontWeight[this.index]; 
t.$("error").style.color="#000"; 
t.$("error").innerHTML="如果有错误，请使用橡皮擦："; 
t.isEraser=false; 
t.cxt.strokeStyle = t.storageColor; 
} 
} 
}, 
changeBackground:function(num) 
{ 
/*添加画笔粗细的提示背景颜色切换，灰色为当前*/ 
var fontIptNum=this.$("font").getElementsByTagName("input"); 
for(var j=0,m=fontIptNum.length;j<m;j++) 
{ 
fontIptNum[j].className=""; 
if(j==num) fontIptNum[j].className="grea"; 
} 
}, 
getUrl:function() 
{ 
this.$("html").innerHTML=this.canvas.toDataURL(); 
}, 
resetEraser:function(_x,_y,touch) 
{ 
/*使用橡皮擦-提醒*/ 
var t=this; 
//this.cxt.lineWidth = 30; 
/*source-over 默认,相交部分由后绘制图形的填充(颜色,渐变,纹理)覆盖,全部浏览器通过*/ 
t.cxt.globalCompositeOperation = "destination-out"; 
t.cxt.beginPath(); 
t.cxt.arc(_x, _y, t.eraserRadius, 0, Math.PI * 2); 
t.cxt.strokeStyle = "rgba(250,250,250,0)"; 
t.cxt.fill(); 
t.cxt.globalCompositeOperation = "source-over" 
} 
}; 
paint.init(); 
})(); 
</script> 
<div style="clear:both"></div> 
</body> 
</html> 

-->