javascript 图片裁剪技巧

学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="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");
//这个 每次都要计算 基本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>

时间： 2024-10-31 01:25:30

javascript 图片裁剪技巧的相关文章

javascript 图片裁剪技巧解读_javascript技巧

学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>Res

ps图片裁剪技巧

数码相机拍摄的照片需要通过裁剪得到良好的构图和合适的大小.裁剪工具可以简单地完成这些任务.不过有的朋友可能不知道,裁剪照片的方法有很多,不仅仅是裁剪工具的专利. "裁剪工具" 的基础用法 裁剪工具可以用来将图片裁大或者裁小,修正歪斜的照片. 1: 我们首先学习裁剪工具的基础用法.使用图1所示的裁剪工具(标示1处),可以看到属性栏(标示2处)在默认情况下是没有输入任何数值的,我们可以在图中框 选出一块区域,这块区域的周围会被变暗,以显示出裁来的区域.裁剪框的周围有8个控制点,利用它,我们

简单实现JavaScript图片切换效果_javascript技巧

JavaScript实现图片切换,主要用到setInterval()函数和clearInterval()函数,前者功能是开启动画,后者功能则为清除动画(可理解为使动画停止),为了使动画停止,则需要定义全局变量作为标志,标志返回setInterval()函数的id,id作为clearInterval()函数的引用,目的是为了告诉clearInterval()函数动画暂停的位置.下面是实现的代码: 部分HTML代码:第一个为左按钮,是一张带箭头的透明图片,点击实现图片右滑动,第二个为图片展示区域,第

理解Javascript图片预加载_javascript技巧

预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.

基于javascript代码实现通过点击图片显示原图片_javascript技巧

废话不多说了,直接给大家贴js实现点击图片显示原图片的代码,具体代码如下所示: function DrawImage(ImgD){ var image = new Image(); image.src=ImgD.src; var width = $(ImgD).attr("width"); var height = $(ImgD).attr("height"); if(width >100 && height>80){ ImgD.widt

轻松实现JavaScript图片切换_javascript技巧

本文实例为大家介绍JavaScript图片切换的实现方法,分享给大家供大家参考,具体内容如下 效果图: 网页看到非常常见的一个图片切换效果:在淘宝.JD等购物时,介绍产品的图片会有多张,一般是显示一张,底下有一排小图片,鼠标放到小图片上大图片会切换.参考vivo X5M 移动4G手机 .下面记录一下实现的过程. 1. getElementById() 该方法是操作dom非常常用的一个方法,比如有一p标签,id设为pid,通过getElementById("pid")就可以对该元素进行操

基于原生JS实现图片裁剪_javascript技巧

下面是我自己写的图片裁剪的功能介绍: 可以利用鼠标拖拉,产生裁剪框 可以改变裁剪框大小 点击确定,返回裁剪数据 原理 完成裁剪的方法有两种: 1.利用HTML5新增拖拽事件drag drop等 2.传统方法,利用鼠标事件,mousedown.mousemove等 在这里,我们采用方法2. 裁剪区域的形成 要进行裁剪首先要形成裁剪区域,这个裁剪区域的形成我们可以与鼠标移动的距离相关联.鼠标移动多远,裁剪区域就有多大.如下图: 如上图所示鼠标的横向移动距离与纵向移动距离共同组成了裁剪区域的宽和高.

smartcrop.js智能图片裁剪库_javascript技巧

smartcrop.js 是一个裁图不会裁掉人脸的 JS 插件 今天将为大家介绍一款近期github上很不错的开源库 – smartcrop.js.它是一款图片处理的智能裁剪库.在很多项目开发中,经常会遇见上传图片的场景,它可能是用户照片信息,也可能是商品图片等.然而在网页布局中,为了更好的用户体验,它们往往都需要一些宽度和高度的限制.对于不合适的图片,常常需要为用户提供一种裁剪方式,以此来满足网站更好的用户体验.但是图片默认的裁剪区域往往被显示在一个固定的位置,而这个位置却往往又不是精准的用户

Javascript网页制作技巧:图片列表自适应宽度显示

文章简介:从事网页重构好几年了,Javascript能力一直比较菜,主要还是做得太少.为了提高这方面的能力,这段时间主动承担了一些这方面的工作,真心感到学习和积累的不易,不过时常伴随着一些解决问题之后的小小成就感又让人乐此不疲. 从事网页重构好几年了,Javascript能力一直比较菜,主要还是做得太少.为了提高这方面的能力,这段时间主动承担了一些这方面的工作,真心感到学习和积累的不易,不过时常伴随着一些解决问题之后的小小成就感又让人乐此不疲. 在近期一个项目中,遇到一个图片列表自适应宽度显示的