일반적으로 웹화면에서 이미지태그의 가로/세로를 지정합니다.
화면에 일정하게 보여줘야하는 이미지인경우
어떤이미지는 크고, 작고...
뒤죽박죽이면 안되기 때문입니다.
작은 사이즈의 넓이,높이를 고정하는거는
이미지만 깨질뿐 속도에는 별 영향이 없는걸로 알고있습니다.
그 반대로 큰 이미지를 작은 사이즈로 구겨넣으려고 할 경우 버벅거릴 경우가 존재합니다
이럴 경우를 위하여 큰사이즈의 이미지를 축소하는 작업이 필요합니다.
썸네일생성이라고 하는데 이부분에 대하여 간단하게 구현을 해보도록 하겠습니다.
위 이미지를 가지고 썸네일을 만들어볼까 합니다
위치 + 경로는 ("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 |
---|
검색의 70%이상이 네이버 검색을 이용한답니다.
검색해서 자신이 얻고자 하는 정보를 얻었다면?
대부분 정보만 얻고 블로그를 나가기 다반사입니다.
바로!! 검색하고 들어온 방문자들을!!!
나의 이웃으로 끌어들이기 위한 방법중 하나라고 생각이 됩니다.
네이버 이웃추가 위젯의 장점은
'타블로그(티스토리,다음블로그,이글루스 등등..) 도 가능하다'라는 것입니다.
만약 내 블로그에 이웃추가 위젯을 설치하고 누군가 위젯을 통해 이웃으로 추가했다면?
네이버 구독에서 해당 블로거가 등록한 포스팅을 실시간으로 구독이 가능합니다.
위에서 보시다시피 제가 이전에 관리했던 블로그의 이웃을 추가하여 네이버 me에서 구독중인 임시 화면인거죠
이웃추가를 해놓고 본인이 원하는 정보의 글이 등록되었다면?
정확히 어떠한 글인가~ 하고 방문을 하겠죠?
그렇게 된다면 자연스레 블로그의 방문자들이 하나,둘 증가가 될것이라 생각되네요 ㅎ
그럼 본격적으로 이웃추가 위젯을 만들어서 코드발급하는 과정까지 알려드리겠습니다.
네이버 로그인 후 블로그URL접속(http://section.blog.naver.com/)
이웃관리 문구를 클릭
이웃커넥트 관리하기 버튼 클릭
위젯관리 메뉴클릭
위젯코드 생성복사하기
위와같이 스크립트 코드가 생성되면 복사 한다음 본인의 블로그에 원하는 위치에 붙여넣기를 하기만 하면됩니다.
본인의 블로그에 해당 코드를 붙여넣기 한 동작화면은 다음과 같습니다
위와같이 정상적으로 사이드바에 위젯이 추가되었습니다.
하지만 본인이 원하는 위젯화면이 아니여서 다른 타입의 종류로 변경을 해보도록 하겠습니다.
이웃커넥트 관리하기 버튼 클릭후 첫번째 화면에서 다음 하단화면처럼
적용옵션들을 설정 후 저장버튼을 클릭해줍니다.
블로그에 설치된 위젯을 다시한번 확인해보도록 하시죠
위젯 변경은 되었으나 코드를 재발급 받으라는 메시지가 나온답니다.
이럴경우는 상단에 위젯관리 메뉴화면으로 이동하셔서
본인이 방금 등록하신 블로그 URL의 코드 재발급 버튼을 클릭후
생성된 스크립트 코드를 블로그에 등록했던 스크립트 코드에 덮어주시면 되겠습니다.
정상적으로 변경이 완료되었네요
티스토리에서도 이웃관리를 통해서 기존방문자들을 잡으시길...!!
by 개발로짜
티스토리에 syntaxhighlighter 설치 및 반영하여 소스코드 깔끔하게 적용하기 (0) | 2014.10.10 |
---|---|
내 블로그를 네이버 검색등록을 이용하여 검색에 노출시키자 (0) | 2014.10.06 |
구글 페이지스피드 인사이트로 티스토리 블로그 로딩속도 평가하기 (0) | 2014.10.04 |