Home > Developer > JavaScript
Js + jquery supports image cropping, and jsjquery supports image cropping.
Now we have a personal portrait upload function when using the personal centers of various websites. After uploading a personal photo, the user may not meet the requirements of the website. Therefore, the user is required to crop the photo and generate an avatar based on the size of the cropped image. This feature is amazing. It was amazing when I didn't understand js. I thought it would be nice if I could understand the technology ~ Do you have the same idea ~ Haha ~~
Next we will use javascript to implement this function.
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> clip </title>
<Style type = "text/css">
* {Padding: 0; margin: 0 ;}
Ul {list-style-type: none; overflow: hidden; zoom: 1; width: 1000px; margin: 30px auto ;}
Li {float: left; width: 500px ;}
# Container {width: 480px; height: 480px; margin: 0 auto; border: 1px solid #999; position: relative; background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_xx.jpg );}
# Container. block {height: 100px; width: 100px; border: 1px solid #000000; position: absolute; left: 50px; top: 50px; background: # fff; filter: alpha (opacity = 30); opacity: 0.3; cursor: move ;}
# Container. tips {position: absolute; padding: 5px; border: 1px solid # ccc; background: # fff; filter: alpha (opacity = 60); opacity: 0.6; display: none; font-size: 12px; color: #333 ;;}
. Tips span {display: inline-block; zoom: 1; width: 28px ;}
. RRightDown,. rLeftDown,. rLeftUp,. rRightUp,. rRight,. rLeft,. rUp,. rDown {
Position: absolute; background: # f00; width: 6px; height: 6px; z-index: 5; font-size: 0 ;}
. RLeftDown,. rRightUp {cursor: ne-resize ;}
. RRightDown,. rLeftUp {cursor: nw-resize ;}
. RRight,. rLeft {cursor: e-resize ;}
. RUp,. rDown {cursor: n-resize ;}
. RRightDown {bottom:-3px; right:-3px ;}
. RLeftDown {bottom:-3px; left:-3px ;}
. RRightUp {top:-3px; right:-3px ;}
. RLeftUp {top:-3px; left:-3px ;}
. RRight {right:-3px; top: 50%}
. RLeft {left:-3px; top: 50%}
. RUp {top:-3px; left: 50%}
. RDown {bottom:-3px; left: 50%}
# ImgC {border: 1px solid # CCC; width: 0; height: 0; margin: 0 auto; background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_xx.jpg );}
. Code {
Background: none repeat scroll 0 0 # E3F4F9;
Border: 1px solid # BAE2F0;
Font: 12px "Courier New", Courier, monospace;
Margin: 30px auto;
Padding: 10px 10px 40px;
Width: 980px;
}
. Code p {height: 24px; line-height: 24px ;}
. Code span {display: inline-block; zoom: 1; margin-right: 5px; width: 85px; font-weight: bold; color: # 00F}
</Style>
</Head>
<Body>
<Div class = "code">
<Div class = "how"> usage </div>
<P> $ ("# container"). clip ({
ImgC: $ ("# imgC "),
BlockClass: "block ",
TipsClass: "tips"
}); </P>
<P> <span> imgC: </span> indicates the image cropping container, that is, the image on the right </p>
<P> <span> blockClass: </span> the block style name is the drag-and-drop slider style on the page. The default value is block because the style name is different from that on other pages. </p>
<P> <span> tipsClass: </span> the style name of the tips, that is, the style name of the span with left width height top displayed on the page, is tips by default. </p>
</Div>
<Ul>
<Li>
<Div id = "container"> </div>
</Li>
<Li>
<Div id = "imgC"> </div>
</Li>
</Ul>
<Script type = "text/javascript" src = "http://common.cnblogs.com/script/jquery.js"> </script>
<Script type = "text/javascript">
(Function (){
Var dBody = document. body,
DDoc = document.doc umentElement,
Ie = $. browser. msie;
Ie & ($. browser. version = "6.0 ")
&Document.exe cCommand ("BackgroundImageCache", false, true );
Var clip = function (options ){
This. init. call (this, options );
}
Clip. prototype = {
Options :{
MoveCallBack: function (){},
BlockClass: "block ",
TipsClass: "tips"
},
Init: function (options ){
$. Extend (this, this. options, options || {});
If (! This. container |! This. imgC ){
Return;
}
This. container = $ (this. container );
Var self = this;
This. block = $ ('<div class = "' + this. blockClass + '"> \
<Div action = "rightDown" class = "rRightDown"> </div> \
<Div action = "leftDown" class = "rLeftDown"> </div> \
<Div action = "rightUp" class = "rRightUp"> </div> \
<Div action = "leftUp" class = "rLeftUp"> </div> \
<Div action = "right" class = "rRight"> </div> \
<Div action = "left" class = "rLeft"> </div> \
<Div action = "up" class = "rUp"> </div> \
<Div action = "down" class = "rDown"> </div> \
</Div> ')
. Bind ("mousedown. r", function (e) {self. start (e )})
. AppendTo (this. container [0]);
This. tips = $ ('<span class = "' + this. tipsClass + '"/>'). appendTo (this. container [0]);
This. setImg ();
},
SetImg: function (){
Var block = this. block;
Var left = block.css ("left "),
Top = block.css ("top "),
Height = block. height (),
Width = block. width ();
This.imgC.css ({
Height: height,
Width: width,
"Background-position": "-" + left + "-" + top
});
This.tips.html ("left: <span>" + parseInt (left) + "</span> top: <span>" ++ parseInt (top) + "</span> width: <span> "+ width +" </span> height: <span> "+ height +" </span> ");
},
Start: function (e ){
Var $ elem = values (e.tar get ),
Block = this. block,
Self = this,
Move = false,
Container = this. container,
Action = $ elem. attr ("action ");
// Every time you calculate the change of the basic dom structure, the browser's scaling will change the value.
This. offset = $. extend ({height: container. height (), width: container. width ()}, container. offset ());
This. blockOriginal = {height: block. height (), width: block. width (), left: parseInt(block.css ("left"), top: parseInt(block.css ("top "))};
If (action ){
This. fun = this [action];
} Else {
This. x = e. clientX-this. offset. left-this. blockOriginal. left;
This. y = e. clientY-this. offset. top-this. blockOriginal. top;
Move = true;
}
Ie
& This. block [0]. setCapture ();
This. tips. show ();
$ (Document)
. Bind ("mousemove. r", function (e) {self. move (e, move )})
. Bind ("mouseup. r", function () {self. end ()});
},
End: function (){
$ (Document)
. Unbind ("mousemove. r ")
. Unbind ("mouseup. r ");
Ie
& This. block [0]. releaseCapture ();
This. tips. hide ();
},
Move: function (e, isMove ){
Window. getSelection
? Window. getSelection (). removeAllRanges ()
: Document. selection. empty ();
Var block = this. block;
If (isMove ){
Var left = Math. max (0, e. clientX-this. offset. left-this. x );
Left = Math. min (left, this. offset. width-this. blockOriginal. width );
Var top = Math. max (0, e. clientY-this. offset. top-this. y );
Top = Math. min (top, this. offset. height-this. blockOriginal. height );
Block.css ({left: left, top: top });
} Else {
Var offset = this. fun (e );
Block.css (offset );
}
This. setImg ();
This. moveCallBack ();
},
Down: function (e ){
Var blockOriginal = this. blockOriginal,
STop = Math. max (dBody. scrollTop, dDoc. scrollTop), // calculate this when a vertical scroll bar appears.
Offset = this. offset;
If (e. clientY-offset.top> = blockOriginal. top-sTop ){
Var height = Math. min (offset. height-blockOriginal. top, e. clientY-offset.top-blockOriginal.top + sTop ),
Top = blockOriginal. top;
} Else {
Var height = Math. min (offset. top + blockOriginal. top-e.clientY-sTop, blockOriginal. top ),
Top = Math. max (e. clientY-offset. top + sTop, 0 );
}
Return {height: height, top: top };
},
Up: function (e ){
Var blockOriginal = this. blockOriginal,
STop = Math. max (dBody. scrollTop, dDoc. scrollTop ),
Offset = this. offset;
If (e. clientY-offset.top-blockOriginal.height <= blockOriginal. top-sTop ){
Var top = Math. max (e. clientY-offset.top + sTop, 0 ),
MaxHeight = blockOriginal. top + blockOriginal. height,
Height = Math. min (maxHeight, blockOriginal. top + blockOriginal. height-(e. clientY-offset.top)-sTop );
} Else {
Var height = Math. min (e. clientY-offset.top-blockOriginal.top-blockOriginal.height + sTop, offset. height-blockOriginal.top-blockOriginal.height ),
Top = blockOriginal. top + blockOriginal. height;
}
Return {height: height, top: top };
},
Left: function (e ){
Var blockOriginal = this. blockOriginal,
Offset = this. offset;
If (e. clientX-offset. left-blockOriginal. width-blockOriginal. left <= 0 ){
Var left = Math. max (e. clientX-offset. left, 0 ),
Width = Math. min (blockOriginal. left + blockOriginal. width, blockOriginal. left + blockOriginal. width-(e. clientX-offset.left ));
} Else {
Var width = Math. Minute (e. clientX-offset.left-blockOriginal.left-blockOriginal.width, offset. width-blockOriginal.left-blockOriginal.width ),
Left = blockOriginal. left + blockOriginal. width;
}
Return {left: left, width: width };
},
Right: function (e ){
Var blockOriginal = this. blockOriginal,
Offset = this. offset;
If (e. clientX-offset.left> = blockOriginal. left ){
Var width = Math. min (offset. width-blockOriginal. left, e. clientX-offset. left-blockOriginal. left ),
Left = blockOriginal. left;
} Else {
Var width = Math. min (offset. left + blockOriginal. left-e. clientX, blockOriginal. left ),
Left = Math. max (e. clientX-offset. left, 0 );
}
Return {left: left, width: width };
},
RightDown: function (e ){
Return $. extend (this. right (e), this. down (e ));
},
LeftDown: function (e ){
Return $. extend (this. left (e), this. down (e ));
},
RightUp: function (e ){
Return $. extend (this. right (e), this. up (e ));
},
LeftUp: function (e ){
Return $. extend (this. left (e), this. up (e ));
},
GetValue: function (){
Var block = this. block;
Return {
Left: parseInt(block.css ("left ")),
Top: parseInt(block.css ("top ")),
Width: block. width (),
Height: block. height ()
}
}
}
$. Fn. clip = function (options ){
Options. container = this;
Return new clip (options );
}
})();
Xx = $ ("# container"). clip ({
ImgC: $ ("# imgC ")
})
</Script>
</Body>
</Html>
Isn't it cool? Learn the ideas of this example, my friends.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
