새로운 프로젝트를하고 싶기 때문에 간단한 사진 검증 코드를 수행 할 계획입니다.
아이디어에 대해 먼저 이야기 해 보겠습니다. 서버 측면에서 폴더에서 8 장의 사진을 찾은 다음 8 장의 사진을 큰 그림으로 병합 한 다음, 사용자가 강아지, 맥주 등과 같은 8 개의 작은 그림을 확인할 수있는 사진 분류를 무작위로 생성합니다.이 페이지에 액세스 할 때 그림에 접속할 때 사진에 필요한 그림을 선택합니다. 사용자가 로그인하면 선택한 사진이 실제로 사용자가 선택한 모든 좌표를 기반으로 확인 사진인지 확인하십시오.
두 가지 렌더링을 먼저 봅시다 :
파일 검색을보다 쉽게하기 위해 이미지 파일 구조는 다음과 같습니다.
이로 인해 사용자가 선택하고자하는 주요 그림의 생성을 용이하게하고 8 개의 작은 그림과 함께 큰 그림에 결합합니다.
위의 코드 : 이것은 8 장의 사진을 선택하고 각 그림을 선택할 때 선택한 사진이 반복되지 않도록하는 것입니다.
// 8 이미지 선택 공용 정적 목록 <bood> geteightimages () {// 이미지가 반복되지 않도록하기 위해 가져 오는 각 이미지의 경로를 저장 <string> 경로 = new Arraylist <string> (); 파일 [] finalimages = 새 파일 [8]; 목록 <Object> Object = new ArrayList <Object> (); // 팁을 저장 문자열 [] tip = 새 문자열 [8]; for (int i = 0; i <8; i ++) {// 랜덤 보조 디렉토리 받기 int dirindex = getrandom (secondarydirnumbers); 파일 secondaryDir = getFiles () [dirindex]; // 팁에 팁에 랜덤 폴더 이름을 저장 [i] = secondaryDir.getName (); // 보조 이미지 디렉토리 파일에서 파일을 가져옵니다 [] images = secondaryDir.listFiles (); int imageIndex = getrandom (imagerandomindex); 파일 이미지 = 이미지 [imageIndex]; // 그림 중복 제거 이미지 = DropSameImage (이미지, 경로, 팁, i); paths.add (image.getPath ()); 최종 분야 [i] = 이미지; } object.add (finalimages); Object.add (팁); 반환 개체;}이 8 개의 이미지를 생성 할 때 모든 파일 범주를 배열에 저장하십시오. 이 범주에서는 임의의 숫자를 사용하여 범주를 주요 범주로 선택할 수 있습니다.이 범주는 사용자가 선택하려는 모든 그림입니다. 배열이 주문되므로 배열의 요소를 가로 질러 각 주요 분류 이미지의 위치를 얻을 수 있으며, 이는 사용자 확인 중에 일치하는 데 편리합니다.
// 첨자가 아닌 이미지가 반환되는 위치를 가져옵니다. 1부터 시작하여 컬렉션의 첫 번째 요소는 팁 공개 정적 목록 <botorlocation (string [] tips) {list <botort> locations = new ArrayList <botort> ()입니다. // 키 분류 받기 문자열 팁 = getTip (팁); 위치 .add (팁); int length = tips.length; for (int i = 0; i <length; i ++) {if (tip.equals (tip [i])) {locations.add (i+1); }} 반환 위치; }8 장의 사진을 선택한 후 다음 단계는 사진을 병합하는 것입니다. 이미지를 병합하려면 BufferedImage 메소드 : setrgb () 메소드를 사용할 수 있습니다. 이해하지 못하면 자세한 지침이있는 API 문서를 읽을 수 있습니다.
public static void mergeimage (file [] finalimages, httpservletresponse response)는 ioexception {// 이미지 bufferedimage mergeimage = new bufferedimage (800, 400, bufferedimage.type_int_bgr); for (int i = 0; i <8; i ++) {file image = finalimages [i]; BufferedImage bufferedImage = imageio.Read (image); int width = bufferedImage.getWidth (); int height = bufferedImage.getheight (); // 이미지에서 rgb를 읽습니다 int [] imageBytes = new int [width*height]; imageBytes = bufferedImage.getRGB (0, 0, 너비, 높이, ImageBytes, 0, 너비); if (i <4) {mergeimage.setrgb (i*200, 0, 너비, 높이, ImageBytes, 0, 너비); } else {mergeimage.setrgb ((i -4)*200, 200, 너비, 높이, ImageBytes, 0, 너비); }} imageio.write (mergeimage, "jpg", response.getoutputStream ()); //imageio.write(mergeimage, "jpg", destimage); }컨트롤러 계층에서 먼저 주요 분류를 세션에 저장하고 사용자가 이미지 분류를 선택할 수 있도록 프롬프트 및 이미지 확인을하십시오. 그런 다음 이미지 스트림을 응답으로 출력하여 확인 이미지를 생성합니다.
Response.setContentType ( "image/jpeg"); Response.SetHeader ( "Pragma", "No-Cache"); Response.SetHeader ( "Cache-Control", "No-Cache"); response.setDateHeader ( "만료", 0); 목록 <Object> object = imagesElectedHelper.geteightImages (); file [] finalimages = (file []) object.get (0); 문자열 [] tips = (String []) object.get (1); // 모든 키의 이미지 위치, 즉 사용자가 목록을 선택 해야하는 이미지 <bood> 위치 = ImageSelectedHelper.getLocation (tips); 문자열 tip = locations.get (0) .toString (); System.out.println (팁); session.setattribute ( "팁", 팁); 위치. int length = locations.size (); for (int i = 0; i <length; i ++) {system.out.println ( "실제 키 이미지 위치 :"+locations.get (i)); } session.setAttribute ( "위치", 위치); imageMerge.MergeImage (최종이지, 응답);JSP에서는 사용자 클릭에 대한 작은 이미지 태그를 생성합니다. 사용자가 이미지를 클릭하면 부모 div에 자식 div 태그를 추가하고 상대적으로 배치 한 다음 Zindex를 설정 한 다음 div에 IMG 태그를 추가하여 절대로 배치하십시오. 사용자가 클릭하면 클릭 이벤트를 받고 클릭 이벤트를 기반으로 클릭 좌표를받은 다음 상대적 좌표를 얻기 위해 부모 DIV의 좌표를 빼낼 수 있습니다. 선호도에 따라 좌표 원점을 결정할 수 있습니다. 여기서 좌표 원점은 8 번째 사진의 오른쪽 하단 모서리입니다.
<div> <br> <div id = "base"> <br> <img src = "<%= request.getContextPath ()%>/"onclick = "clickImg (event)"id = "bigPicture"> <br> <br> <br> <brid> <br> <br> function clickimg (e) {varsavidiv = document. "); var topvalue = 0; var leftValue = 0; var obj = basediv; while (obj) {leftValue += obj.offsetleft; topvalue += obj.offsetTop; obj = obj.offsetparent; } // Firefox가 클릭 이벤트를 얻을 수없는 문제를 해결하십시오 var clickevent = e? e : (window.event? window.event : null); var clickleft = clickevent.clientx + document.body.scrollleft- document.body.clientleft -10; var clicktop = clickevent.clienty + document.body.scrolltop- Document.body.clientTop -10; var divid = "img_"+index ++; var divele = document.createElement ( "div"); divele.setattribute ( "id", divid); divele.style.position = "상대"; divele.style.zindex = index; divele.style.width = "20px"; divele.style.height = "20px"; divele.style.display = "인라인"; divele.style.top = clicktop -topvalue -150 + 10 + "px"; divele.style.left = ClickLeft -LeftValue -300 + "PX"; divele.setattribute ( "onclick", "remove ( '" + divid + "'); Basediv. AppendChild (Divele); var imgele = document.createElement ( "IMG"); imgele.src = "<%= request.getContextPath ()%>/resources/timo.png"; imgele.style.width = "20px"; imgele.style.height = "20px"; imgele.style.top = "0px"; imgele.style.left = "0px"; imgele.style.position = "절대"; imgele.style.zindex = index; Divele.appendChild (Imgele); }사용자가 로그인을 선택한 후 서버 측은 선택한 사용자의 좌표를 기반으로 판단합니다.
공개 목록 <integer> ispass (string result) {string [] xylocations = result.split ( ","); // 사용자가 선택한 좌표가 어떤 이미지를 저장하는지 저장 <integer> list = new ArrayList <integer> (); // 각 좌표 세트 system.out.println ( "선택한 사진 수 :"+xylocations.length); for (string xylocation : xylocations) {string [] xy = xylocation.split ( "// | // |"); int x = integer.parseint (xy [0]); int y = integer.parseint (xy [1]); // 8,4 사진 간격 if (x> -75 && x <= 0) {if (y> -75 && y <= 0) {// no. 8 list.add (8); } else if (y> = -150 && y <= -75) {// no. 4 list.add (4); }} else if (x> -150 && x <= -75) {// 7,3 사진 간격 if (y> -75 && y <= 0) {// no. 7 list.add (7); } else if (y> = -150 && y <= -75) {// no. 3 List.add (3); }} else if (x> -225 && x <= -150) {// 6,2 사진 간격 if (y> -75 && y <= 0) {// no. 6 List.add (6); } else if (y> = -150 && y <= -75) {// no. 2 list.add (2); }} else if (x> = -300 && x <= -225) {// 5,1 사진 간격 if (y> -75 && y <= 0) {// no. 5 list.add (5); } else if (y> = -150 && y <= -75) {// no. 1 list.add (1); }} else {return null; }} 리턴 목록; }새 사진을 생성하려면 새로 고침. Ajax는 이진 스트림을 지원하지 않으므로 기본 XMLHTTPREQUEST 객체를 사용하여 HTML5 블로브를 추가하여 완료 할 수 있습니다.
function refresh () {var url = "<%= request.getContextPath ()%>/식별"; var xhr = 새로운 xmlhttprequest (); xhr.open ( 'get', url, true); xhr.responseType = "blob"; xhr.onload = function () {if (this.status == 200) {var blob = this.response; // 성공적으로 bigpicture.onload = function (e) {window.url.revokeObjectUrl (bigPicture.src); }; bigpicture.src = window.url.createobjecturl (blob); }} xhr.send ();검증 코드의 전체 코드가 완료되었으며 여전히 처리해야 할 몇 가지 세부 사항이 있습니다.
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.