JCrop

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

- 데모 : http://jcrop.org/demos/basic

- 퀵스타트 : http://jcrop.org/doc/quickstart

bower : https://github.com/tapmodo/Jcrop/blob/master/bower.json

etc : http://deepliquid.com/projects/Jcrop/demos/tutorial5.html

imgScalr http://gubok.tistory.com/423

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 했었다.

아주 유용하게 사용가능하다 ㅋㅋ