Step 1: create a work Interval
First, we need to set up a work interval, create a file hierarchy, and create a corresponding empty file.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> </title>
<Script src = "Scripts/jquery-1.4.1.min.js" type = "text/javascript"> </script>
<Link href = "resources/css/style.css" rel = "stylesheet" type = "text/css"/>
<Link href = "resources/js/imageCrop/jquery.imagecrop.css" rel = "stylesheet" type = "text/css"/>
<Script src = "resources/js/imageCrop/jquery. imagecrop. js" type = "text/javascript"> </script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div id = "wrapper">
<H1>
Jquery Image Croping plug-in <Div class = "image-decorator">
Width = "480"/> </div> <! -- Image modifier layer -->
</Div> <! -- # Package layer -->
</Form>
</Body>
</Html>
[/Code]
Style.css
Copy codeThe Code is as follows:
*{
Margin: 0;
Outline: 0;
Padding: 0;
}
/* Initialize the webpage style */
Body {
Background-color: # ededed;
Color: #646464;
Font-family: 'verdana ', 'Geneva', sans-serif;
Font-size: 12px;
Text-shadow: 0 1px 0 # ffffff;
}
H1 {
Font-size: 24px;
Font-weight: normal;
Margin: 0 0 10px 0;
}
Div # wrapper {
Margin: 25px 25px 25px 25px;
}
/* Select the div whose id is wrapper */
Div. image-decorator {
-Moz-border-radius: 5px 5px 5px;/* sharpen the box of Firefox browsers */
-Moz-box-shadow: 0 0 6px # c8c8c8;/* border shadow processing for Firefox browsers */
-Webkit-border-radius: 5px 5px 5px;/* WebKit is an open-source browser engine */
-Webkit-box-shadow: 0 0 6px # c8c8c8;
Background-color: # ffffff;
Border: 1px solid # c8c8c8;
Border-radius: 5px 5px 5px 5px;
Box-shadow: 0 0 6px # c8c8c8;
Display: inline-block;/* submits an object as an inline object, but the content of the object is presented as a block object. The Inline object next to it will be presented in the same row and spaces are allowed. Supported browsers include Opera and Safari */
Height: 360px;
Padding: 5px 5px 5px 5px;
Width: 480px;
}
We changed the background color and set some basic styles to make our pages more appealing.
Step 3: Write a basic jQuery plug-in
Let's start to write a basic jQuery plug-in. before writing, if you have never experienced writing jQuery plug-ins, we suggest you first look at the official plug-in tutorials (http://docs.jquery.com/Plugins/Authoring ), this is an English version. The Chinese version is not found and the writer intends to translate it. Please look forward to it.
Open/resources/js/imageCrop/jquery. imagecrop. js and add the js code shown in
Copy codeThe Code is as follows:
// Generally, please include the written plug-in code in '(function ($) {// plug-in code here}) (jQuery );'
(Function ($ ){
$. ImageCrop = function (object, customOptions ){};
$. Fn. imageCrop = function (customOptions ){
// Iterate over each object
// Iterate each object
This. each (function (){
Var currentObject = this,
Image = new Image ();
// When the object is loaded, append the imageCrop cut function.
Image. onload = function (){
$. ImageCrop (currentObject, customOptions );
};
// Reset the image address, because sometimes cached images cannot be quickly loaded.
Image. src = currentObject. src;
});
// Unless your plug-in returns a definite value, the function is usually required to return the 'eas' keyword
// To keep programming chained
Return this;
};
}) (JQuery );
We have just extended jQuery by adding a new method attribute to the jQuery. fn object. Now we have completed iteration of each object and attached the basic plug-in of the imageCrop function when it is loaded. Note that the cached image may not be quickly downloaded, so the image address is reset.
Step 4: Add customizable options
You can customize the options to make more choices for users and make the plug-in more flexible. (Note: The following code is in order)
Copy codeThe Code is as follows:
// Encapsulate the plug-in options in a constant object, which is far better than passing a long string of parameters.
// This allows extension by default of the plug-in
Var defaultOptions = {
AllowMove: true,
AllowResize: true,
AllowSelect: true,
MinSelect: [0, 0],
OutlineOpacity: 0.5,
OverlayOpacity: 0.5,
SelectionPosition: [0, 0],
SelectionWidth: 0,
SelectionHeight: 0
};
// Set the option to the default option
Var options = defaultOptions;
// Merge the custom options
SetOptions (customOptions );
In the preceding example, we define an array containing the default options, and then use the setOption function to merge the default options and custom options. Now let's write this merging function body.
Copy codeThe Code is as follows:
// Merge the default and custom options
Function setOptions (customOptions ){
Options = $. extend (options, customOptions );
};
The $. extend () function combines two or more objects into the first object.
Option
The following list explains every option in the plug-in.
AllowMove-specifies whether the selection area can be moved (the default value is true .)
AllowResize-specifies whether the size of the selection area can be re-specified (the default value is true)
AllowSelect-specifies whether the user can re-specify the selection area (the default value is true)
MinSelect-minimum size of a new selection area (the default size is [0, 0])
OutlineOpacity-transparency of the contour (default value: 0.5)
OverlayOpacity-transparency of the overwriting layer (default value: 0.5)
SelectionPosition-position of the selection area ([0, 0] by default)
SelectionWidth-width of the selection area (the default value is 0)
SelectionHeight-length of the selection area (the default value is 0)
Step 5: create an image layer
In this step, we will change the structure of the document to prepare for the next step: the plug-in Surface
First, we need to initialize the image layer, and then initialize the image inclusion layer.
Copy codeThe Code is as follows:
// Initialize the Image Layer
Var $ image = $ (object );
// Initialize an image support Layer
Var $ holder = $ ('<div/> ')
. Css ({
Position: 'relative'
})
. Width ($ image. width ())
. Height ($ image. height ());
// Imag is included in the holder layer. wrap () function
$ Image. wrap ($ holder)
. Css ({
Position: 'abort'
});
As you can see, the contain layer and image have the same size and contain layer and image relative positioning. Then we use the. wrap function to include the image in it.
The top layer of the image is covered:
Copy codeThe Code is as follows:
// Initialize a cover layer and place it on the Image
Var $ overlay = $ ('<div id = "image-crop-overlay"/> ')
. Css ({
Opacity: options. overlayOpacity,
Position: 'abort'
})
. Width ($ image. width ())
. Height ($ image. height ())
. InsertAfter ($ image );
This layer is as big as an image, but it is absolutely positioned. We get the transparency from options. outlineOpacity. This element has an Id, so we can change its style through the css of the plug-in. At last, we used the. insertAfter ($ image) method to place the overwriting layer under the image layer.
The following layer is the attacker layer.
Copy codeThe Code is as follows:
// Initialize a trigger layer and place it on the top of the overwriting Layer
Var $ trigger = $ ('<div/> ')
. Css ({
BackgroundColor: '#000000 ',
Opacity: 0,
Position: 'abort'
})
. Width ($ image. width ())
. Height ($ image. height ())
. InsertAfter ($ overlay );
This time is invisible to users, but it will handle some events.
Next is the border layer and selection Layer
Copy codeThe Code is as follows:
// Initialize a border layer and place it on the top of the trigger Layer
Var $ outline = $ ('<div id = "image-crop-outline"/> ')
. Css ({
Opacity: options. outlineOpacity,
Position: 'abort'
})
. InsertAfter ($ trigger );
// Initialize a selection layer and place it above the border Layer
Var $ selection = $ ('<div/> ')
. Css ({
Background: 'url ('+ $ image. attr ('src') +') no-repeat ',
Position: 'abort'
})
. InsertAfter ($ outline );
The. attr () method is used to return the value of a specific attribute. We use it to get the image address and use it as the background of the selection layer.
Absolute positioning in relative positioning
A relative positioning element can control the absolute positioning element, so that the absolute positioning element is inside the relative positioning element. This is why the contained layer is relatively positioned, and all its sub-elements are absolutely positioned.
Step 6: update the interface
First, we need to start with some global variables.
Copy codeThe Code is as follows:
// Initialize global variables
Var selectionExists,
SelectionOffset = [0, 0],
SelectionOrigin = [0, 0];
SelectionExists will tell us whether a selected region exists. selectionOffset will contain the offset relative to the starting point, and selectionOrigin will contain the starting point of the selected region.
The following conditions exist when the plug-in is loaded.
Copy codeThe Code is as follows:
// Indicates whether the size of the selected area is greater than the minimum value, and then determines whether the selected area exists.
If (options. selectionWidth> options. minSelect [0] &
Options. selectionHeight> options. minSelect [1])
SelectionExists = true;
Else
SelectionExists = false;
Now we will call updateInterface to initialize the plug-in Interface
// Call the 'uploadinterface' function for the first time to initialize the plug-in Interface
UpdateInterface ();
