<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="cpath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#img-layer{
z-index:3;
}
#rec-layer{
z-index:3;
}
#di_img{
position: absolute;
}
canvas{
position: absolute;
}
#tes{
position: absolute;
z-index:2;
}
#tes_div{
border: 2px solid blue;
position: absolute;
width: 200px;
height: 200px;
z-index:3;
}
</style>
</head>
<body>
<h1>테스트 파일</h1>
<div id="div_img">
<div id="tes_div"></div>
<img id="tes" src="${cpath }/resources/img/test2_blurr.png" usemap="#Map">
</div>
<map name="Map" id="Map">
<area shape="rect" coords="318,5,354,21" tabindex="1">
<area shape="rect" coords="354,5,419,21" tabindex="2">
<area shape="rect" coords="553,10,582,23" tabindex="3">
<area shape="rect" coords="588,9,629,23" tabindex="4">
<area shape="rect" coords="100,979,159,993" tabindex="5" onclick="alert('asd')">
</map>
<script src="${cpath }/resources/js/jquery-3.3.1.min.js"></script>
<script>
var img_c = new Image;
img_c.src = '/controller/resources/img/test2_blurr.png';
var img = document.getElementById("tes");
//$("div").append("<canvas id='img-layer' width='"+img.offsetWidth+"' height='"+img.offsetHeight+"'></canvas>")
//$("div").append("<canvas id='rec-layer' width='"+img.offsetWidth+"' height='"+img.offsetHeight+"'></canvas>")
//$("canvas").append("<img src='/controller/resources/img/test2_blurr.png'>")
/* var canvas_img = document.getElementById('img-layer');
var ctx = canvas_img.getContext('2d'); */
//var canvas_rec = document.getElementById('rec-layer');
//var ctx_rec = canvas_rec.getContext('2d');
/* img_c.onload = function() {
ctx.drawImage(img_c, 0, 0);
};
ctx.strokeStyle = 'blue';
ctx.strokeRect(431,979,504-431,996-979); */
$.ajax({
type : 'post',
url : 'http://127.0.0.1:5000/',
data : "1",
dataType : 'json',
success : function(res) {
$.each(res.fields, function(a,b){
//document.write(res.fields[a].inferText+"<br>")
//$("ul").append("<li>"+res.fields[a].inferText+"</li>")
var cor = res.fields[a].boundingPoly.vertices
$('map').append("<area onblur='this.focus()' autofocus shape='rect' coords='"+cor[0].x+","
+cor[0].y+","+cor[2].x+","+cor[2].y+"' onclick='alert("+a+")'"+
""+">")
})
},
error : function() {
alert('요청 실패쓰');
}
})
function getLoc() {
var x = event.offsetX;
var y = event.offsetY;
alert("현재좌표는 : "+x+" / "+y);
var w = img.offsetWidth;
var h = img.offsetHeight;
}
function test(){
var x = event.offsetX;
var y = event.offsetY;
}
function boxing(ctx_rec, cor){
return ctx_rec.strokeRect(cor[0].x,cor[0].y,cor[2].x-cor[0].x,cor[2].y-cor[0].y)
}
//const fs = require('fs');
//fs.readFile('test.json')
</script>
</body>
</html>
map 태그는 img 태그와 함께 사용
area는 해당 img 태그에서 어떤 링크를 걸어줄 영역을 표시하고플 때 사용한다.
canvas 태그의 경우 일종의 스케치북을 만들고 그 위에 이미지를 넣거나 그림을 그릴 수 있다.
원래는 canvas 태그 2개를 통해 하나는 이미지 하나는 그리는 용도로 layer를 다르게 주어 해결하려 했으나,
layer가 밑에 있어버리니까 이미지 태그에서 onmouse 관련 옵션이 안먹었다...
뭐 나중에 정리하자
반응형
'국비교육기관 > 플젝' 카테고리의 다른 글
| FireBase - NoSQL과 SQL(관계형 데이터 베이스) (0) | 2021.08.12 |
|---|---|
| 2차 플젝_Flask연동_CORS와 관련해서 (0) | 2021.06.27 |
| 2차 플젝_Ajax와 Flask 연동 (0) | 2021.06.27 |
| 1차_프로젝트_21.04.22~04.28 (0) | 2021.05.02 |
댓글