🎜>Jquery 이미지 자르기 플러그인

width="480" />

[/code]
style.css

코드 복사

코드는 다음과 같습니다. * { margin : 0; 🎜>개요 : 0; 패딩 : 0; }

/*웹페이지 스타일 초기화*/

body { 
 background-color : #ededed 
color : #646464 ; 
 글꼴 계열: 'Verdana', 'Geneva', sans-serif; { 
 글꼴 크기: 24px; 
글꼴 무게: 일반; 
여백: 0 0 10px 0; 
div#wrapper { 
여백: 25px 25px 25px; 
} 
/*래퍼 ID가 있는 div를 선택하세요*/ 
div.image-decator { 
-moz-border-radius : 5px 5px 5px 5px;/*Firefox용 상자 선명화 browsers* / 
-moz-box-shadow : 0 0 6px #c8c8c8;/*Firefox 브라우저에 대한 상자의 테두리 그림자 처리*/ 
-webkit-border-radius : 5px 5px 5px 5px;/*WebKit 오픈 소스 브라우저 엔진입니다*/ 
-webkit-box-shadow : 0 0 6px #c8c8c8; 
 background-color : #ffffff 
border : 1px solid 
border- radius; : 5px 5px 5px 5px; 
box-shadow : 0 0 6px #c8c8c8; 
display : inline-block; /* 객체를 인라인 객체로 렌더링하지만 객체의 내용을 블록 객체로 렌더링합니다. 인접한 인라인 개체는 공백을 허용하여 같은 줄에 렌더링됩니다. 지원되는 브라우저는 다음과 같습니다. Opera, Safari*/ 
높이: 360px; 
패딩: 5px 5px 5px 5px; 
너비: 480px; 
} 

 
위 내용은 다음과 같습니다. 배경색을 변경하고 몇 가지 기본 스타일을 설정하면 페이지를 더 읽기 쉽게 만들 수 있습니다. 
3단계: 기본 jQuery 플러그인 작성
글을 작성하기 전에 독자 여러분이 jQuery 플러그인을 작성해 본 경험이 없다면 다음과 같습니다. 공식 지침을 먼저 읽어보는 것이 좋습니다(http://docs.jquery.com/Plugins/Authoring). 이것은 영어 버전이고 중국어 버전은 찾을 수 없으며 저자가 번역할 계획이므로 그대로 두십시오. 조정되었습니다. 
/resources/js/imageCrop/jquery.imagecrop.js를 열고 아래와 같이 js 코드를 추가하세요. 




코드 복사

코드는 다음과 같습니다.

//일반적으로 '(function($) { // Plug-in code here}) (jQuery);에 작성하신 플러그인 코드를 포함시켜주세요. '
(function($) {
$.imageCrop = function(object, customOptions) {};

$.fn.imageCrop = function (customOptions) { //각 개체에 대해 반복 / /각 객체에 대해 반복 this.each(function () { var currentObject = this, image = new Image(); //객체가 로드되면 ImageCrop을 추가합니다. Cutting function

image.onload = function () {

$.imageCrop(currentObject, customOptions)
}//이미지가 캐시되는 경우가 있기 때문에 이미지 주소를 재설정할 수 없습니다. 빠르게
image.src = currentObject.src;
});
//플러그인이 특정 값을 반환하지 않는 한, 함수는 일반적으로 'this' 키워드를 반환해야 합니다
// 이는 프로그래밍을 계속 연결하는 데 사용됩니다
return this
})

;
jQuery.fn 객체에 새로운 메소드 속성을 추가하여 jQuery를 확장했습니다. 이제 각 객체를 반복하고 로드될 때 imageCrop 함수를 객체에 연결하는 기본 플러그인이 있습니다. 캐시된 이미지가 빠르게 다운로드되지 않을 수 있으므로 이미지 주소를 재설정하세요.

4단계: 사용자 정의 가능한 옵션 추가

사용자 정의 가능한 옵션을 사용하면 사용자에게 더 많은 선택권이 주어지고 플러그인이 더욱 유연해집니다. (참고: 아래 코드 순서대로입니다)

코드 복사 코드는 다음과 같습니다.

 
/ / 플러그인의 옵션을 상수 개체에 캡슐화하는 것이 전달할 매개변수의 긴 목록을 전달하는 것보다 훨씬 낫습니다. 
//플러그인에서 기본적으로 확장을 허용합니다. 
var defaultOptions = { 
allowMove: true, 
allowResize: true, 
allowSelect: true, 
minSelect: [ 0 , 0], 
outlineOpacity: 0.5, 
overlayOpacity: 0.5, 
selectionPosition: [0, 0], 
selectionWidth: 0, 
selectionHeight: 0 
}; 
// 옵션을 기본 옵션으로 설정
var options = defaultOptions; 

// 그런 다음 고객 맞춤 옵션과 병합
setOptions(customOptions) 

 

위에서는 기본 옵션이 포함된 배열을 정의한 다음 setOption 함수를 사용하여 기본 옵션과 사용자 정의 옵션을 병합합니다. 이제 병합 함수 본문을 작성해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

 // 기본 옵션과 고객 맞춤형 옵션이 병합됩니다. 
function setOptions(customOptions) { 
options = $.extend(options, customOptions) 
}; .extend() 이 함수는 두 개 이상의 객체를 첫 번째 객체로 병합하는 기능을 구현합니다. 

옵션

다음 목록은 플러그인의 각 옵션을 설명합니다.

allowMove – 선택 항목을 이동할 수 있는지 여부를 지정합니다(기본값은 true입니다.)
allowResize – 선택 영역의 크기를 조정할 수 있는지 여부를 지정합니다(기본값은 true)
allowSelect – 사용자가 선택 영역의 크기를 조정할 수 있는지 여부를 지정합니다(기본값은 true)
minSelect – 새 선택 영역의 최소 크기( 기본 크기는 [0, 0])
outlineOpacity – 윤곽선의 투명도(기본값은 0.5)
overlayOpacity – 오버레이의 투명도(기본값은 0.5)
selectionPosition – 선택 영역 위치(기본값은 [0, 0])
selectionWidth – 선택 영역의 너비(기본값은 0)
selectionHeight – 선택 영역의 길이(기본값은 0)
5단계: 이미지 레이어 생성

이 단계에서는 다음 단계인 플러그인 표면을 준비하기 위해 문서의 구조를 변경합니다

먼저 이미지 레이어를 초기화한 다음 레이어가 포함된 이미지를 초기화해야 합니다.

코드 복사

코드는 다음과 같습니다. // 이미지 레이어 초기화 var $image = $(object)

// 이미지 지원 레이어 초기화
var $holder = $('

')
.css({
위치: '상대적'
})
.width($image.width())
.height($image.height());

// imag는 홀더 레이어에 포함되어 있습니다. Wrap() 함수

$image.wrap($holder)
. css({
position: 'absolute'
});

보시다시피 포함된 레이어와 이미지의 크기가 동일하고 서로 상대적으로 배치되어 있습니다. 그런 다음 .wrap 기능을 사용하여 그 안에 포함된 이미지를 만듭니다.

이미지 위에 오버레이가 있습니다.

코드 복사

코드는 다음과 같습니다. //오버레이를 초기화하고 이미지 위에 배치합니다. var $overlay = $('

.css({

불투명도: options.overlayOpacity, 
위치: '절대' 
}) 
.width($image.width( )) 
 .height($image.height()) 
.insertAfter($image); 

 
 이 레이어도 이미지와 크기는 동일하지만 절대적으로 위치가 지정됩니다. options.outlineOpacity에서 투명성을 얻습니다. 이 요소에는 ID가 있으므로 플러그인을 통해 CSS를 변경하여 스타일을 변경할 수 있습니다. 마지막으로 .insertAfter($image) 메소드를 사용하여 이미지 레이어 바로 아래에 오버레이를 배치합니다. 

하위 레이어가 트리거 레이어입니다

코드 복사

코드는 다음과 같습니다.

//트리거 레이어를 초기화하고 오버레이 위에 배치합니다.
var $trigger = $('

')
.css({
backgroundColor: '#000000',
불투명도: 0,
위치: '절대'
})
.width($image.width())
.height($image.height() )
.insertAfter($overlay);

이번에는 사용자에게 표시되지 않지만 일부 이벤트를 처리합니다.

다음은 테두리 레이어와 선택 레이어

코드 복사 코드는 다음과 같습니다.

 
//테두리 레이어를 초기화하고 트리거 레이어 위에 배치합니다. 
var $outline = $('') 
.css ({ 
opacity: options.outlineOpacity, 
position: 'absolute' 
}) 
.insertAfter($trigger) 

// 선택 레이어를 초기화하고 테두리 레이어 위에 설정 
var $selection = $('') 
.css({ 
 background: 'url(' $image.attr('src') ' ) no-repeat', 
position: 'absolute' 
}) 
.insertAfter($outline) 


　.attr() 메소드는 특정 The 속성 값을 사용하여 이미지의 주소를 가져와서 선택 레이어의 배경으로 사용합니다. 

상대 위치 내 절대 위치

상대 위치 요소는 절대 위치를 제어할 수 있습니다. 위치 지정 요소 , 절대 위치 지정 요소가 상대적 위치 지정 요소 내부에 있도록 합니다. 이는 포함 레이어가 상대적으로 배치되고 모든 하위 요소가 절대적으로 배치되는 이유이기도 합니다. 

6단계: 인터페이스 업데이트 

　　　먼저 일부 전역 변수를 초기화해야 합니다 

코드 복사 코드는 다음과 같습니다.
 
//전역 변수 초기화
var SelectionExists, 
 SelectionOffset = [0, 0], 
selectionOrigin = [0, 0]; 


 SelectionExists는 선택 영역이 있는지 알려주고, SelectionOffset은 시작점을 기준으로 한 오프셋을 포함합니다. SelectionOrigin 선택 영역의 시작점을 포함합니다

플러그인 로드 시 선택 영역이 존재하도록 하려면 다음 조건을 사용합니다

코드 복사 코드는 다음과 같습니다. 
 
//선택 영역의 크기가 가장 작은 크기보다 큰지 여부를 나타내고 이를 기준으로 선택 영역의 존재 여부를 설정합니다. 
if (options.selectionWidth > options.minSelect[0] && 
options.selectionHeight > options.minSelect[1]) 
selectionExists = true 
else 
selectionExists = false; 
 이제 updateInterface를 호출하여 플러그인을 초기화하겠습니다. 인터페이스 

//플러그인 인터페이스를 초기화하기 위해 처음으로 'uploadInterface' 함수를 호출합니다. 
updateInterface(); >

jQuery_jquery 기반 이미지 자르기 플러그인

🎜>Jquery 이미지 자르기 플러그인