$.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 $holder = $('
')
.css({
위치: '상대적'
})
.width($image.width())
.height($image.height());
// imag는 홀더 레이어에 포함되어 있습니다. Wrap() 함수
$image.wrap($holder)
. css({
position: 'absolute'
});
보시다시피 포함된 레이어와 이미지의 크기가 동일하고 서로 상대적으로 배치되어 있습니다. 그런 다음 .wrap 기능을 사용하여 그 안에 포함된 이미지를 만듭니다.
이미지 위에 오버레이가 있습니다.
코드 복사
.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(); >
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
