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

1단계: 작업공간 구축

먼저 튜토리얼을 위한 작업공간을 생성하고 그림과 같이 파일 계층 구조를 구축한 후 해당 빈 파일을 생성해야 합니다.

< ;title>




< ;/head>

🎜>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(); >