JCrop

Front 2016. 12. 7. 22:03


공식 홈페이지 : http://jcrop.org



Crop은 이미지를 자르는것을 의미한다. 
Jcrop은 프론트에서 이미지 영역을 지정할 수 있도록 해주고 콜백함수까지 제공하므로 아주 유용하게 사용 가능하다.
이런 간단한 기능을 JQuery를 통해 제공해준다. 그래서 JCrop 인가 ㅋㅋ

- 데모페이지



보다시피 사진을 잘라서 영역을 지정할 수 있다.
이게 좋은점은 아래의 좌표와 Width, Height 값 때문이다.
이를 아주 유용하게 사용할 수 있다.
(X,Y 말고 X2, Y2도 있음. 오른쪽 하단인듯)

- require
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://jcrop-cdn.tapmodo.com/v2.0.0-RC1/js/Jcrop.js"></script>
<link rel="stylesheet" href="http://jcrop-cdn.tapmodo.com/v2.0.0-RC1/css/Jcrop.css" type="text/css">

- 사용법
1) html에 img 태그를 하나 생성한다.
<img src="img path" id="img" />


2) jQuery로 호출한다! 끝!
$("#img").JCrop();
> 이렇게만 호출하면 이미지에 드래그로 영역 선택이 가능해진다.
이제 x,y 좌표, width, height값을 전달하기 위해 hidden field와 callback function을 작성해야 한다.


- html
<form action="/crop">
     <input type="hidden" name="x" id="x" />
     <input type="hidden" name="y" id="y" />
     <input type="hidden" name="w" id="w" />
     <input type="hidden" name="h" id="h" />
</form>

<img src="img path" id="img">

- script

// callback function
var showCoords = function(c)
{
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
};

// JCrop 호출
$('#img').Jcrop({
    setSelect: [0,0,width,height],
    onChange: showCoords,
    onSelect: showCoords
});

이렇게 하고 #img에서 영역을 마음껏 지정해보면 hidden 필드의 값이 지정한 영역에 맞게 계속해서 변한다 !!

JCrop 호출 시 사용할 수 있는 옵션은 많으니 공식 홈페이지를 참조하자.
ex)
allowSelect:false, // 새롭게 영역 지정이 불가능
allowResize:false, // 리사이징이 불가능

이제 이값을 폼으로 전달해서 마음껏 사용하자..

필자는 이미지 업로드 시 이미지를 자르는것을 구현했었다.
파일을 업로드 하면 해당 파일을 컨트롤러에서 받은 뒤 temp에 저장하고, JCrop이 사용가능하도록 img 태그로 뿌리고,
사용자가 해당 img에서 영역을 지정한 뒤 폼으로 전송하면
IMG로 뿌렸던 파일에서 전달받은 x,y,width,height를 통해 해당 이미지를 자르고 replace 했었다.
아주 유용하게 사용가능하다 ㅋㅋ



'Front' 카테고리의 다른 글

bower  (0) 2017.02.14
ajax error와 multipart/form-data 이슈  (0) 2017.02.14
JCrop  (0) 2016.12.07
입력값 검사에 유용한 validate JQuery  (0) 2015.05.11
타 도메인 iframe 제어  (3) 2015.03.25

댓글을 달아 주세요