[JavaScript] getElementByTagName( ) 메소드[JavaScript] getElementByTagName( ) 메소드
Posted at 2020. 2. 28. 13:54 | Posted in JavaScript & jQuery/JavaScript발췌 : 하루 10분씩 핵심만 골라 마스터하는 Ajax
■ documet.getElementByTagName( ) 메소드
getElementByTagName( ) 메소드를 이용하면 각각의 태그 명을 통해서
문서안의 요소들에 대해서 자바스크립트 배열을 만들 수 있다.
자바스크립트 코드에서 다음과 같이 문서 안의 요소에 접근을 할 수 있다.
# 소스코드
<html> <head> <title>:: JavaScript - getElementsByTagName ::</title> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { const txtElements = document.getElementsByTagName("input")[0].value; alert( txtElements ); }); </script> </head> <body> <input type="text" value="누구나 그럴싸한 계획을 갖고 있다.\n치명타에 세 번 연속으로 처맞기 전까지는. 으하하하하하하하"/> </body> </html> |
# 출력결과
이 코드는 block 이라는 태그 이름을 가진 모든 요소들을 blocks 라는 변수에 배열 형식으로 반환하는 코드이다.
다음 코드처럼 다른 일반 배열과 같은 방식으로 배열의 크기를 알 수 있다.
( 인자로 주어진 태그 이름과 같은 요소들의 개수를 의미한다. )
# 소스코드
<html> <head> <title>:: JavaScript - getElementsByTagName ::</title> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { const blocks = document.getElementsByTagName( "block" ); alert( blocks.length ); }); </script> </head> <body> <block>1번 블럭</block> <block>2번 블럭</block> <block>3번 블럭</block> <block>4번 블럭</block> <block>5번 블럭</block> <block>6번 블럭</block> <block>7번 블럭</block> </body> </html> |
# 출력결과
배열의 각각의 요소에 대해서도 접근할 수 있다.
bean이라는 이름을 가진 두 번째 요소에 대해서 접근할 경우
bean[1]로 접근이 가능하다.
# 소스코드
<html> <head> <title>:: JavaScript - getElementsByTagName ::</title> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { const bean = document.getElementsByTagName("bean")[1]; alert( bean.innerHTML ); }); </script> </head> <body> <bean>임요환</bean> <bean>홍진호</bean> <bean>강 민</bean> </body> </html> |
# 출력결과
'JavaScript & jQuery > JavaScript' 카테고리의 다른 글
| [JavaScript] Canvas를 통한 이미지 회전 (6) | 2020.03.04 |
|---|---|
| [JavaScript] 업로드한 파일 Resizer 하여 화면에 출력시키기 (0) | 2020.03.04 |
| [JavaScript] INPUT TYPE FILE 썸네일 생성 (0) | 2020.01.16 |
| [JavaScript] 파일업로드시 용량 검사하기 (0) | 2019.12.26 |
| [JavaScript] 체크박스 전체 선택 - Sample (0) | 2019.12.19 |
[jQuery] JCROP을 이용한 이미지 자르기 - Sample[jQuery] JCROP을 이용한 이미지 자르기 - Sample
Posted at 2020. 2. 11. 13:29 | Posted in JavaScript & jQuery/jQuery
Jcrop 다운 : http://deepliquid.com/content/Jcrop.html
Jcrop API : https://jcrop.com/
GitHub : https://github.com/tapmodo/Jcrop
■ JCROP을 이용한 업로드한 크롭( CROP ) 하기
웹 브라우저 상에서 이미지를 업로드하고, 해당 이미지를 편집 하는 기능을 제작하게 되었다.
HTML5의 캔버스를 통해 업로드한 이미지를 똑같이 복사하여, 작업영역을 만들고.
캔버스에서 작업이 완료된 그림을 다시 원본 이미지와 교체하는형태로 서버에 업로드 하지 않고 작업하는것을 마무리 하였다.
# 소스코드
| <html> <head> <meta charset="UTF-8"> <title>:: JavaScript 캔버스 이미지 업로드 ::</title> <meta name="viewport" content="width=device-width"> <link type="text/css" rel="stylesheet" href="./css/modern.css"/> <link type="text/css" rel="stylesheet" href="http://jcrop-cdn.tapmodo.com/v0.9.12/css/jquery.Jcrop.min.css"/> <style type="text/css"> .imgArea { text-align:center; } canvas, #uploadFile, #editBtn, #cutBtn { display:none; } body { overflow:hidden }; </style> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="http://jcrop-cdn.tapmodo.com/v0.9.12/js/jquery.Jcrop.min.js"></script> <script type="text/javascript"> let jcropApi = null; // @breif 이미지 크롭 영역지정 UI 나타내기 function imgCropDesignate() { let editWidth = jQuery("#editImg").width(); let editHeight = jQuery("#editImg").height(); // @breif jcrop 실행시 크롭영역을 미리 세팅 let x1 = window.screen.width / 2 - editWidth; let y1 = window.screen.height / 2 - editHeight; let x2 = editWidth / 1.5; let y2 = editHeight / 1.5; // @breif jcrop 실행 jQuery("#editImg").Jcrop({ bgFade : true , bgOpacity : .2 , setSelect : [ x1, y1, x2, y2 ] , onSelect : updateCoords }, function() { jcropApi = this; }); jQuery("#editBtn").css("display", "none"); jQuery("#cutBtn").css("display", "inline"); } // @breif 지정된 크롭 한 영역( 좌표, 넓이, 높이 )의 값을 보관하는 함수 function updateCoords(crap) { jQuery("#xAxis").val(crap.x); jQuery("#yAxis").val(crap.y); jQuery("#wLength").val(crap.w); jQuery("#hLength").val(crap.h); } // @breif 크롭한 영역 잘라내고 추출하기 function imgCropApply() { if(parseInt(jQuery("#wLength").val()) == "NaN") { alert("이미지를 크롭한 이후\n자르기 버튼을 클릭하세요."); return false; } else { let editImage = new Image(); editImage.src = jQuery("#editImg").attr("src"); editImage.onload = function() { // @breif 캔버스 위에 이미지 그리기 let canvas = document.querySelector("canvas"); let canvasContext = canvas.getContext("2d"); // @breif 캔버스 크기를 이미지 크기와 동일하게 지정 canvas.width = jQuery("#wLength").val(); canvas.height = jQuery("#hLength").val(); canvasContext.drawImage( this , jQuery("#xAxis").val() // 자르기를 시작할 x좌표 , jQuery("#yAxis").val() // 자르기를 시작할 y좌표 , jQuery("#wLength").val() // 잘라낸 이미지의 넓이 , jQuery("#hLength").val() // 잘라낸 이미지의 높이 , 0 // 캔버스에 이미지를 배치할 x좌표 , 0 // 캔버스에 이미지를 배치할 y좌표 , jQuery("#wLength").val() // 사용할 이미지의 넓이(이미지 스트레칭 또는 축소) , jQuery("#hLength").val() // 사용할 이미지의 높이(이미지 스트레칭 또는 축소) ); // @breif 편집한 캔버스의 이미지를 화면에 출력한다. let dataURI = canvas.toDataURL("image/jpeg"); jQuery("#editImg").attr("src", dataURI); // @breif 이미지의 크기는 자른 이미지와 동일하게 지정 jQuery("#editImg").css("width", jQuery("#wLength").val()); jQuery("#editImg").css("height", jQuery("#hLength").val()); }; jQuery("#cutBtn").css("display", "none"); // @details JCROP을 종료한다. jcropApi.destroy(); jcropApi = null; } } // @breif 이미지 업로드 함수 function uploadImgFilePrinted() { // @details 업로드 파일 정보를 받아온다. let fileInfo = document.getElementById("uploadFile").files[0]; let reader = new FileReader(); reader.onload = function() { // @details 업로드 이미지 출력 jQuery("#editImg").attr("src", reader.result); // @details 이미지 크기를 제목 영영과 같게 출력 jQuery("#editImg").css("width", jQuery("h1").width()); // @details 이미지 업로드 기능 제거, 추가 업로드 방지 jQuery("#editImg").parent("a").removeAttr("onClick"); // @details 편집버튼 노출 jQuery("#editBtn").css("display", "inline"); canvasDrawImage(function() { alert("이미지 업로드가 완료되었습니다."); }); }; if(fileInfo) { // @details readAsDataURL을 통해 업로드한 파일의 URL을 읽어 들인다. reader.readAsDataURL(fileInfo); } } // @breif 캔버스 이미지 생성 function canvasDrawImage(callback) { let prepImage = new Image(); prepImage.src = jQuery("#editImg").attr("src"); prepImage.onload = function() { // @details 캔버스 위에 이미지 그리기 // jQuery("canvas") 와같은 명령은 사용할 수 없다. let canvas = document.querySelector("canvas"); let canvasContext = canvas.getContext("2d"); canvas.width = jQuery("#editImg").width(); canvas.height = jQuery("#editImg").height(); canvasContext.drawImage(this, 0, 0, jQuery("#editImg").width(), jQuery("#editImg").height()); // @details 캔버스의 이미지 let dataURI = canvas.toDataURL("image/jpeg"); jQuery("#editImg").attr("src", dataURI); callback(); }; } </script> </head> <body> <input type="hidden" id="xAxis" value="0" placeholder="선택영여역의_x좌표"/> <input type="hidden" id="yAxis" value="0" placeholder="선택영여역의_y좌표"/> <input type="hidden" id="wLength" value="0" placeholder="선택영여역의_w넓이"/> <input type="hidden" id="hLength" value="0" placeholder="선택영여역의_h높이"/> <input type="file" id="uploadFile" onChange="uploadImgFilePrinted();" accept="image/*"/> <div class="contents"> <h1>이미지 자르기<span>샘플</span></h1> <div class="imgArea"> <a href="javascript:;" onClick="jQuery('#uploadFile').click();"> <img id="editImg" src="./user-anonymous.png"/> </a> <br/><br/> <input id="editBtn" type="button" onClick="imgCropDesignate();" value="편집"/> <input id="cutBtn" type="button" onClick="imgCropApply();" value="자르기"/> </div> <canvas></canvas> <div class="copyright" style="bottom:0;"> <p>Producer © 사악미소</p> </div> </div> </body> </html> |
# 출력결과
관련포스팅#01 : [JavaScript] 이미지 파일 썸네일 생성하기
관련포스팅#02 : [JavaScript] Canvas를 통한 이미지 회전
관련포스팅#03 : [JavaScript] Canvas로 이미지 서버에 전송하기 - Sample
관련포스팅#04 : [jQuery] JCROP을 이용한 이미지 자르기 - Sample
'JavaScript & jQuery > jQuery' 카테고리의 다른 글
| [jQuery] TextBox에서 다중 선택 기능 제작 (0) | 2020.07.24 |
|---|---|
| [jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영 (0) | 2020.03.02 |
| [jQuery] jQuery Mobile을 이용한 반응형 테이블 제작 (0) | 2019.06.18 |
| [jQuery] 팝업 창 외에 다른 항목 클릭 막기 (0) | 2019.06.04 |
| [jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기 (7) | 2019.01.31 |
[JavaScript] INPUT TYPE FILE 썸네일 생성[JavaScript] INPUT TYPE FILE 썸네일 생성
Posted at 2020. 1. 16. 10:27 | Posted in JavaScript & jQuery/JavaScript작성중
'JavaScript & jQuery > JavaScript' 카테고리의 다른 글
| [JavaScript] 업로드한 파일 Resizer 하여 화면에 출력시키기 (0) | 2020.03.04 |
|---|---|
| [JavaScript] getElementByTagName( ) 메소드 (0) | 2020.02.28 |
| [JavaScript] 파일업로드시 용량 검사하기 (0) | 2019.12.26 |
| [JavaScript] 체크박스 전체 선택 - Sample (0) | 2019.12.19 |
| [JavaScript] 실시간 타이머(시계) 만들기 (2) | 2019.12.05 |
[JavaScript] 파일업로드시 용량 검사하기[JavaScript] 파일업로드시 용량 검사하기
Posted at 2019. 12. 26. 11:25 | Posted in JavaScript & jQuery/JavaScript참고 : https://zzznara2.tistory.com/617
■ 파일업로드시 용량 검사하기
# 소스코드
<html> <head> <title>:: JAVASCRIPT 파일업로드 ::</title> <script type="text/javascript"> function imgFileUpload() { /// @brief 업로드할 이미지의 크기( Byte )를 구해온다. const imgSize = document.getElementById("personImg").files[0].size; /// @brief 업로드할 이미지 사이즈의 크기는 4MB 이하로 설정 const maxSize = 4 * 1024 * 1024; /// @brief 이미지 if(imgSize > maxSize) { alert("첨부할 수 있는 이미지 파일은 4MB 이하여야 합니다."); document.getElementById("personImg").focus(); return false; } else { alert("업로드 가능한 이미지입니다."); } } </script> </head> <body> <form enctype="multipart/form-data" id="upFrm" method="post"> <input type="file" id="personImg" name="personImg" value=""/> <input type="button" onClick="imgFileUpload();" value="업로드"/> </form> </body> </html> |
# 출력결과 - 수정예정
관련문서 : [JavaScript] 파일업로드시 확장자 검사하기
'JavaScript & jQuery > JavaScript' 카테고리의 다른 글
| [JavaScript] getElementByTagName( ) 메소드 (0) | 2020.02.28 |
|---|---|
| [JavaScript] INPUT TYPE FILE 썸네일 생성 (0) | 2020.01.16 |
| [JavaScript] 체크박스 전체 선택 - Sample (0) | 2019.12.19 |
| [JavaScript] 실시간 타이머(시계) 만들기 (2) | 2019.12.05 |
| [JavaScript] 전광판 효과 구현하기 (0) | 2019.12.05 |
