jcrop 기본 용법

jcrop 원본 다운로드 페이지:강 타
기본 적 인 사용 방법 은 다음 과 같다.
1.head 부분(와사이)에 관련 css 와 js 파일 을 삽입 합 니 다.

<link rel="stylesheet" href="css/jquery.Jcrop.css">
<script src="js/jquery.js"></script> 
<script src="js/jquery.Jcrop.js"></script>

2.헤드 부분 에 리 셋 함수 등 관련 처리 파 라미 터 를 삽입 합 니 다.

<script language="Javascript">
	  <!--
	  jQuery(function($){
// Create variables (in this scope) to hold the API and image size
	  var jcrop_api, boundx, boundy; 
	  $('#cropbox').Jcrop({
	  minSize: [0,0],
	  maxSize:[0,0],
	  setSelect: [0,0,0,0],
	  boxWidth:800,
	  borderOpacity:0.3,
          keySupport:false,
	  dragEdges:false,
	  allowSelect:false,
	  allowResize:false,
	  bgOpacity:0.2,
	  boundary:0,
	  //allowMove:false,
	  addClass: 'jcrop-handle',
	  onSelect: updateCoords,
	  },
	  function(){
	  // Use the API to get the real image size
	  var bounds = this.getBounds();
	  boundx = bounds[0];
	  boundy = bounds[1];
	  // Store the API in the jcrop_api variable
	  jcrop_api = this;
	  });
	  function updateCoords(c)
	  {
	  $('#x').val(c.x);
	  $('#y').val(c.y);
	  $('#w').val(c.w);
	  $('#h').val(c.h);
	  };
	  function checkCoords()
	  {
	  if (parseInt($('#w').val())) return true;
	  alert('       ');
	  return false;
	  };
	  });
	-->
	</script>

3.관련 사진 에 id 를 추가 하여 식별 할 수 있 습 니 다.

<img id="cropbox" src="x.jpg">

이렇게 하면 가장 간단 한 재단 효 과 를 실현 할 수 있 고 동태 문 구 를 어떻게 결합 하여 그림 을 처리 하 는 지 에 대해 꼭대기 에 있 는 글 에서 이미 예 를 들 었 다.
다음 표 는 기본 options 매개 변수 설정 을 보 여 줍 니 다.
명칭.
기본 값
설명 하 다.
allowSelect
true
새 선택 상자 허용
allowMove
true
선택 상자 이동 허용
allowResize
true
선택 상자 크기 조정 허용
trackDocument
true
baseClass
"jcrop"
기본 스타일 이름 접두사.설명:class="jcrop-holder",변 경 된 것 은 jcrop 뿐 입 니 다.
addClass
null
스타일 추가.예:값 이"test"라 고 가정 하면 class="test jcrop-holder"에 스타일 을 추가 합 니 다.
bgColor
"black"
배경 색.색상 키워드,HEX,RGB 모두 가능 합 니 다.
bgOpacity
0.6
배경 투명도
bgFade
false
배경 과도 효과 사용
borderOpacity
0.4
선택 상자 테두리 투명도
handleOpacity
0.5
크기 조정 단추 투명도
handleSize
9
크기 조정 단추 크기
handleOffset
5
크기 조정 단추 와 테두리 의 거리
aspectRatio
0
상자 너비 와 높이 를 선택 하 십시오.설명:width/height
keySupport
true
키보드 제어 지원.버튼 목록:상하 좌우(이동),Esc(취소),Tab(재단 상자 에서 다음 으로 이동)
cornerHandles
true
모서리 크기 조정 허용
sideHandles
true
사각형 크기 조정 허용
drawBorders
true
테두리 그리 기
dragEdges
true
테두리 드래그 허용
fixedSupport
true
touchSupport
null
boxWidth
0
캔버스 폭
boxHeight
0
캔버스 높이
boundary
2
국경.설명:마 우 스 를 경계 에서 드래그 하여 재단 영역 을 선택 할 수 있 습 니 다.
fadeTime
400
과도 한 효과 의 시간
animationDelay
20
애니메이션 지연
swingSpeed
3
과도 속도
minSelect
[0,0]
선택 상자 의 최소 사 이 즈 를 선택 하 십시오.설명:선택 상자 가 이 크기 보다 작 으 면 자동 으로 선택 을 취소 합 니 다.
maxSize
[0,0]
선택 상자 최대 크기
minSize
[0,0]
선택 상자 최소 크기
onChange
function(){}
선택 상자 변경 시 이벤트
onSelect
function(){}
선택 상자 선택 시간 이벤트
onRelease
function(){}
선택 한 상자 의 이벤트 취소
다음 표 는 api 방법 입 니 다.
명칭.
설명 하 다.
setImage(string)
그림 을 설정 하거나 변경 합 니 다.예:jcropapi.setImage("newpic.jpg")
setOptions(object)
인 자 를 설정 하거나 변경 합 니 다.형식 은 설정 인 자 를 초기 화 하 는 것 과 같 습 니 다.
setSelect(array)
선택 상 자 를 만 듭 니 다.매개 변수 형식 은[x,y,x2,y2]입 니 다.
animateTo(array)
애니메이션 효과 로 선택 상 자 를 만 듭 니 다.매개 변수 형식 은[x,y,x2,y2]입 니 다.
release()
선택 해제
disable()
Jcrop 을 사용 하지 않 습 니 다.설명:선택 한 상자 가 삭제 되 지 않 습 니 다.
enable()
Jcrop 사용 하기
destroy()
Jcrop 제거
tellSelect()
선택 상자 의 값(실제 크기)을 가 져 옵 니 다.예:console.log(jcropapi.tellSelect())
tellScaled()
선택 상자 의 값(인터페이스 크기)을 가 져 옵 니 다.예:console.log(jcropapi.tellScaled())
getBounds()
그림 의 실제 크기 를 가 져 옵 니 다.형식 은[w,h]입 니 다.
getWidgetSize()
그림 표시 크기 가 져 오기,형식:[w,h]
getScaleFactor()
그림 크기 조정 비율 가 져 오기,형식:[w,h]