집

웹 프론트엔드

JS 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:03 PM

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7390

자바 튜토리얼

1630

Cakephp 튜토리얼

1357

라라벨 튜토리얼

1268

PHP 튜토리얼

1216

Related knowledge

JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi

8 멋진 jQuery 페이지 레이아웃 플러그인 Mar 06, 2025 am 12:48 AM

손쉬운 웹 페이지 레이아웃에 대한 jQuery 활용 : 8 에센셜 플러그인 jQuery는 웹 페이지 레이아웃을 크게 단순화합니다. 이 기사는 프로세스를 간소화하는 8 개의 강력한 JQuery 플러그인을 강조합니다. 특히 수동 웹 사이트 생성에 유용합니다.

자신의 Ajax 웹 응용 프로그램을 구축하십시오 Mar 09, 2025 am 12:11 AM

그래서 여기 당신은 Ajax라는이 일에 대해 배울 준비가되어 있습니다. 그러나 정확히 무엇입니까? Ajax라는 용어는 역동적이고 대화식 웹 컨텐츠를 만드는 데 사용되는 느슨한 기술 그룹을 나타냅니다. 원래 Jesse J에 의해 만들어진 Ajax라는 용어

10 JQuery Fun 및 Games 플러그인 Mar 08, 2025 am 12:42 AM

10 재미있는 jQuery 게임 플러그인 웹 사이트를보다 매력적으로 만들고 사용자 끈적함을 향상시킵니다! Flash는 여전히 캐주얼 웹 게임을 개발하기위한 최고의 소프트웨어이지만 JQuery는 놀라운 효과를 만들 수 있으며 Pure Action Flash 게임과 비교할 수는 없지만 경우에 따라 브라우저에서 예기치 않은 재미를 가질 수 있습니다. jQuery tic 발가락 게임 게임 프로그래밍의 "Hello World"에는 이제 jQuery 버전이 있습니다. 소스 코드 jQuery Crazy Word Composition 게임 이것은 반은 반은 게임이며, 단어의 맥락을 알지 못해 이상한 결과를 얻을 수 있습니다. 소스 코드 jQuery 광산 청소 게임

내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까? Mar 18, 2025 pm 03:12 PM

기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.

Ajax를 사용하여 상자 컨텐츠를 동적으로로드합니다 Mar 06, 2025 am 01:07 AM

이 튜토리얼은 Ajax를 통해로드 된 동적 페이지 상자를 작성하여 전체 페이지 재 장전없이 인스턴트 새로 고침을 가능하게합니다. jQuery 및 JavaScript를 활용합니다. 맞춤형 Facebook 스타일 컨텐츠 박스 로더로 생각하십시오. 주요 개념 : Ajax와 JQuery