일반적으로 웹화면에서 이미지태그의 가로/세로를 지정합니다.
화면에 일정하게 보여줘야하는 이미지인경우
어떤이미지는 크고, 작고...
뒤죽박죽이면 안되기 때문입니다.
작은 사이즈의 넓이,높이를 고정하는거는
이미지만 깨질뿐 속도에는 별 영향이 없는걸로 알고있습니다.
그 반대로 큰 이미지를 작은 사이즈로 구겨넣으려고 할 경우 버벅거릴 경우가 존재합니다
이럴 경우를 위하여 큰사이즈의 이미지를 축소하는 작업이 필요합니다.
썸네일생성이라고 하는데 이부분에 대하여 간단하게 구현을 해보도록 하겠습니다.
위 이미지를 가지고 썸네일을 만들어볼까 합니다
위치 + 경로는 ("D:\original_image.jpg") 입니다.
용량이 1MB이상이고 크기는 1936 x 1296 입니다.
해당 이미지를 가로(100) X 세로(100) 사이즈로 구겨 넣을 경우
보기도 않좋고 상당히 느리게 로딩이 됩니다.
(물론 네트워크 환경에 따라서 그럴수도 아닐수도 있습니다 ^^;;)
그럼 썸네일 코드를 작성해보도록 하겠습니다.
JDK1.6 이상 사용가능한 코드로 알고있습니다. ^^
패키지명 - com.thumbnail
클래스명 - Thumbnail
public class Thumbnail { public static void main(String args[]){ try { //썸네일 가로사이즈 int thumbnail_width = 100; //썸네일 세로사이즈 int thumbnail_height = 100; //원본이미지파일의 경로+파일명 File origin_file_name = new File("D:"+File.separator+"original_image.jpg"); //생성할 썸네일파일의 경로+썸네일파일명 File thumb_file_name = new File("D:"+File.separator+"thumbnail_image.jpg"); BufferedImage buffer_original_image = ImageIO.read(origin_file_name); BufferedImage buffer_thumbnail_image = new BufferedImage(thumbnail_width, thumbnail_height, BufferedImage.TYPE_3BYTE_BGR); Graphics2D graphic = buffer_thumbnail_image.createGraphics(); graphic.drawImage(buffer_original_image, 0, 0, thumbnail_width, thumbnail_height, null); ImageIO.write(buffer_thumbnail_image, "jpg", thumb_file_name); System.out.println("썸네일 생성완료"); } catch (Exception e) { e.printStackTrace(); } } }
생성된 썸네일 파일을 한번 보도록 할까요?
이미지 사이즈를 줄인것도 아니고 순수하게 위 코드를 이용하여 생성한 파일입니다.
1MB가 됐던 파일이 위 코드를 통하여 5KB로 줄었고
사이즈 역시 100 x 100으로 생성이 되었습니다.
프로젝트에 유용하게 사용하시길 ^^
by 개발로짜
POI라이브러리를 이용하여 엑셀파일(xls,xlsx) 에 데이터 넣어서 파일로 만들기 (1) | 2014.10.07 |
---|---|
DTO,VO에 정의되어있는 변수명 및 갯수에 관계없이 변수명과 value값 한방에 가져오기 (0) | 2014.10.07 |
Map객체의 key값을 읽어서 value값 한번에 추출하기 (0) | 2014.10.07 |
JSTL의 c:forTokens을 이용하여 확장자명 찾기 (0) | 2014.10.06 |
JSON 라이브러리를 이용하여 object생성과 문자열을 object형으로 변환해보기 (0) | 2014.10.06 |
개발을 하다보면 일괄로어떠한 데이터들을 일괄로 삭제 또는 추가를 하기 위해
체크박스를 이용하여 기능을 구현합니다.
예를 들면 게시판 목록에 쉽게 확인 할 수 있습니다.
저희가 자주 쓰는 네이버나 다음의 메일목록을 예를 들도록 해보도록 하겠습니다 ^^
위 화면을 보시면 리스트의 좌측에 체크박스들이 각 리스트마다 체크박스가 존재합니다.
불필요한 메일들을 체크박스를 선택을 하여 한번에 목록에서 지우기 위하여 있는것입니다.
그렇다면 최상단에 존재하는 체크박스는 무엇인가요?
바로 저 상단 체크박스는 현재 존재하는 목록에 체크박스들을 일괄로 선택하게끔 지원을 해주는 놈이되겠습니다.
한번 최상단 체크박스를 클릭해보도록 하겠습니다.
한번에 체크박스들이 선택되었죠?
바로이 기능에 대하여 포스팅을 작성해보도록 하겠습니다
본 포스팅은 jquery 1.9버전의 CDN을 이용하여 진행을 하도록 하였습니다.
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<table border="1"> <tr> <td><input type="checkbox" id="checkall" /></td> <td>내용</td> </tr> <tr> <td><input type="checkbox" name="chk" /></td> <td>테스트내용입니다테스트내용입니다</td> </tr> <tr> <td><input type="checkbox" name="chk" /></td> <td>안녕하세요개발로짜입니다안녕하세요개발로짜입니다</td> </tr> </table>
$(document).ready(function(){ //최상단 체크박스 클릭 $("#checkall").click(function(){ //클릭되었으면 if($("#checkall").prop("checked")){ //input태그의 name이 chk인 태그들을 찾아서 checked옵션을 true로 정의 $("input[name=chk]").prop("checked",true); //클릭이 안되있으면 }else{ //input태그의 name이 chk인 태그들을 찾아서 checked옵션을 false로 정의 $("input[name=chk]").prop("checked",false); } }) })
상단코드 기준으로 한번 실행을 해보도록 하겠습니다.
어떤가요? 맨위에 캡처한 기능과 동일한 기능이 동작 되었죠? ㅎㅎ
프로젝트에 일괄처리가 존재한다면 체크박스로 전체선택 및 해제하는 기능을 이용해보세요!
by 개발로짜
자바스크립트 replaceall함수 만들어서 사용하기 (0) | 2014.10.06 |
---|