Home > Developer > JavaScript
Learn PHP GD library to see a picture cropped just the whole of a well, actually, it's quite simple.
PHP version, the 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>Resize</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; back Ground: #fff; Filter:alpha (opacity=30); opacity:0.3; Cursor:move;}
. 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);}
</style>
</head>
<body>
<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.documentelement;
var clip = function (options) {
This.init.call (this,options);
}
Clip.prototype = {
options: {
movecallback:function () {},
className: "Block"
},
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.classname+ '" >
<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.setimg ();
},
setimg:function () {
var block = This.block;
This.imgC.css ({
height:block.height (),
width:block.width (),
"background-position": "-" +block.css ("left") + "-" +block.css ("Top")
});
},
Start:function (e) {
var $elem = $ (e.target),
block = This.block,
self = this,
move = False,
container = This.container,
action = $elem. attr ("action");
//This every time you want to compute the basic DOM structure, the zoom of the browser will change the value inside
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;
}
$ (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");
},
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.wi Dth-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.scro
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,
S top = 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-offse t.left,0),
width = math.min (blockoriginal.left + blockoriginal.width,blockoriginal.left + blockoriginal.width-( E.clientx-offset.left));
}else{
var width = math.min (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-of Fset.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.cl ientx-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) {
RE Turn $.extend (This.left (E), This.up (e));
},
Getvalue:function () {
var block = This.block
Return {
Left:parseint (block.css (' left ')),
to P:parseint (Block.css ("Top")),
Width:block.width (),
Height:block.height ()
}
}
}
$.fn.clip = f Unction (options) {
Options.container = this;
return new clip (options);
}
}) ();
$ ("#container"). Clip ({
IMGC: $ ("#imgC")
})
</script>
</body>
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
