javascript 图片裁剪技巧解读

站长资源 2024/11/16 佚名

4 1538 4

富贵资源网 Design By www.hznty.com

学php gd库看到有图片裁剪正好整一个嗯其实挺简单的
php版
复制代码代码如下:
<!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; background:#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="/UploadFiles/2021-04-02/jquery.js"><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");
//这个每次都要计算基本dom结构的改变浏览器的缩放都会让里面的值发生改变
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.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), //出现垂直方向滚动条时候要计算这个
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.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-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);
}
})();
$("#container").clip({
imgC : $("#imgC")
})
</script>
</body>
</html>

图片,裁剪

富贵资源网 Design By www.hznty.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

富贵资源网 Design By www.hznty.com

评论“javascript 图片裁剪技巧解读”

暂无评论...

www.hznty.com 富贵资源网

20,135影音资源

44,641技术资源

2,817软件资源

435,032站长资源

javascript 图片裁剪技巧解读

jquery getScript动态加载JS方法改进详解

中国地区三级联动下拉菜单效果分析

评论“javascript 图片裁剪技巧解读”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

javascript 图片裁剪技巧解读

jquery getScript动态加载JS方法改进详解

中国地区三级联动下拉菜单效果分析

评论“javascript 图片裁剪技巧解读”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存