js脚本加样式实现图片剪切博客分类： JS脚本 js剪切图片jQuery-uicursoropacityclip:rect

程序员文章站 2024-02-12 08:44:04

...

闲来无事百度加自己理解写了一个剪切图片的小例子

效果：

js脚本加样式实现图片剪切

博客分类： JS脚本 js剪切图片jQuery-uicursoropacityclip:rect

关键代码如下：

一：样式

body{background:#333}
.box{position: absolute;top:100px;left:200px;}
#preview{position:absolute ;top:100px; left:600px}
.main{position: absolute;width: 200px;height: 200px;border:1px solid #fff;z-index: 2;cursor: move}
img{position: absolute;z-index: 1}
.img1{opacity: 0.6}
#preview{position: absolute;top:100px;left:680px;width:460px;height:360px;}
#preview #img3{position: absolute;top:0;left:0;}

二：页面html

 <body style="cursor: auto;">
	
		<!--上部分 原始图-->
		
		<div id="box" class="box">
			<img class="img1" id="sourceImg"  src="img/9f510fb30f2442a7a75aaf95d243ad4bd11302ad.jpg"   />
		</div>
		<div id="preview">
			
		</div>		

 </body>

三：js脚本

	<script type="text/javascript">
	<!--
		$(function(){

			var count =0;
			var sourceImg = $("#sourceImg");
			//添加一个可选区域到图片上
			var box = $("#box");
			var mainDiv = $('<div class="main" id="main"></div>');
			
			
			mainDiv.draggable(
			{ containment: 'parent',drag: 
				function(){  
					try{
						console.log("移动-->"+count);
						count++;
					}
					catch (e){}
				}
			});
			


			box.append(mainDiv);


			var preview = $("#preview");

			var previewImg = $('<img id="img3" class="" />');
			previewImg.attr('src',sourceImg.attr('src'));
			preview.append(previewImg);
			//初始化设置位置，及缩略图
			setPosition(mainDiv,previewImg);
			
			

			//鼠标相关事件			
			mainDiv.ready(function(){
				var isDown = false;

				//按键
				mainDiv.bind("mousedown", function(){
					isDown  = true;
				});

				//按键释放
				mainDiv.bind("mouseup", function(){
					isDown  = false;
				
				});
				mainDiv.bind("mousemove", function(){
					//在按键未被释放的移动过程中 重置位置，及缩略图
					if(isDown){
						setPosition($(this),previewImg);
					}
				});
			});
			
			function  setPosition($mainDiv,$img){
				//通过jQuery对象转换成 Dom对象
				var mainDiv = $mainDiv.get(0);
				var img = $img.get(0);

				//获取偏移量
				var top = mainDiv.offsetTop;
				var right = mainDiv.offsetLeft+mainDiv.offsetWidth;
				var bottom = mainDiv.offsetTop+mainDiv.offsetHeight;
				var left = mainDiv.offsetLeft;
				
				//重新设定 图片的左上 坐标， 否则显示的缩略图会动(感兴趣的可以把下面两段话注释看效果)
				img.style.top = -top+"px";
				img.style.left = -left+"px";

				img.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
			}

		});
		
	//-->
	</script>

四：关键点

mainDiv.draggable(); jQuery-ui功能，支持Dom元素拖拽
img.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)"; 设置图片的剪切
cursor: move 样式，元素的鼠标放上去样式，显示可移动
.img1{opacity: 0.6} 透明度

完整代码见附件：

http://dl.iteye.com/topics/download/ab31c2e1-21e9-352b-9219-60f08876e27e