文档章节

图片切割插件分步实现(一)

yafasdfa
 yafasdfa
发布于 2014/12/26 17:11
字数 959
阅读 301
收藏 11

该插件是在窗口拖动效果的基础上实现的


当然,这不是最终版,只是一个勉强实现图片切割效果的不稳定版,还有bug,也还有功能未实现,我这样写只是为了把图片切割分成几个单独的功能,然后通过整合实现最终效果,这样方便大家理解和自己修改。

插件源码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>登录</title>
</head>
<style>
body{
	background-color:#DCDCDC;
	
}
.container{
	position:absolute;
	height:400px;
	width:300px;
	border:1px solid black;
	border-radius:3px;
	background:url("http://oospace.sinaapp.com/img/cut.jpg") no-repeat;
	background-color:black;
	opacity:0.2;
	filter:alpha(opacity=20);
	top:100px;
	left:100px
}
.imgLayer{
	position:absolute;
	background:url("http://oospace.sinaapp.com/img/cut.jpg") no-repeat;
	height:400px;
	width:300px;
	clip:rect(20px  280px 300px 30px);
	top:100px;
	left:100px
	
}
.controlLayer{
	position:absolute;
	height:280px;
	width:250px;
	zoom:1;
	border:1px dashed #DCDCDC;
	top:120px;
	left:130px;
	/*cursor:move;*/
}
.mark{
border:1px solid #000000;
	background-color:#ffffff;
	opacity:0.8;
	filter:alpha(opacity=80);
	padding:2px;
	height:3px;
	width:3px;
}
.leftTop{
	position:absolute;
	top:-3px;
	left:-3px;
	cursor: se-resize;
}
.leftCenter{
	position:absolute;
	top:50%;
	left:-3px;
	cursor: w-resize;
}
.topCenter{
	position:absolute;
	top:-3px;
	left:50%;
	cursor: ns-resize;
}
.rightTop{
	position:absolute;
	top:-3px;
	right:-3px;
	cursor: ne-resize;
}
.rightCenter{
	position:absolute;
	top:50%;
	right:-3px;
	cursor: e-resize;
}
.leftBottom{
	position:absolute;
	bottom:-3px;
	left:-3px;
	cursor: ne-resize;
}
.bottomCenter{
	position:absolute;
	bottom:-3px;
	left:50%;
	cursor: s-resize;
}
.rightBottom{
	position:absolute;
	bottom:-3px;
	right:-3px;
	cursor: se-resize;
}
</style>
<body>
    <div class="container">
	</div>
	
		<div  class="imgLayer">
		</div>
	
	<div class="controlLayer">
		<div class="leftTop  mark"></div>
		<div class="topCenter mark"></div>
		<div class="rightTop mark"></div>
		<div class="leftCenter mark"></div>
		<div class="rightCenter mark"></div>
		<div class="leftBottom mark"></div>
		<div class="bottomCenter mark"></div>
		<div class="rightBottom mark"></div>
	</div>
</body>
<script  type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script>
//拖动效果代码
//var _z=9999;
$(document).ready(function(){
 var _move=false;//移动标记
 var _x,_y;//鼠标离控件左上角的相对位置
 var wd;//窗口
 var img=$(".imgLayer");//图片
 var ctain=$(".container");
    $(".controlLayer").click(function(){
        //alert("click");//点击(松开后触发)
     this.style.cursor = "default";//鼠标形状
     //this.style.zIndex = 999;
        }).mousedown(function(e){
        _move=true;
        wd=$(this);
        this.style.cursor = "move";//鼠标形状
        //this.style.zIndex = _z;//窗口层次
        //_z++;
        _x=e.pageX-parseInt(wd.css("left"));
        _y=e.pageY-parseInt(wd.css("top"));
		//_ximg=e.pageX-parseInt(img.css("left"));
		//_yimg=e.pageX-parseInt(img.css("top"));
       /*  wd.fadeTo(20, 0.25); *///点击后开始拖动并透明显示
        $(document).mousemove(function(e){
            if(_move){
                var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
                var y=e.pageY-_y;
				
				//设置controlLayer的范围
				var w_ctn=parseInt(ctain.css("width"));
				var h_ctn=parseInt(ctain.css("height"));
				var l_ctn=parseInt(ctain.css("left"));
				var t_ctn=parseInt(ctain.css("top"));
				var  w_wd=parseInt(wd.css("width"));
				var  h_wd=parseInt(wd.css("height"));
				
				//设置imgLayer的范围
				var top=y-t_ctn+"px";
				var right=parseInt(wd.css("width"))+x-l_ctn+"px";
				var bottom=parseInt(wd.css("height"))+y-t_ctn+"px";
				var left=x-l_ctn+"px";
				var rect="rect( "+top+" "+right+" "+bottom+" "+left+" )";
				
				//根据container控制移动范围
				if(w_ctn>=(x+w_wd-l_ctn)&&h_ctn>=(y+h_wd-t_ctn)&&(y>=t_ctn)&&(x>=l_ctn)){
					wd.css({top:y,left:x});//控件新位置
					img.css("clip",rect);//切割位置
					//img.css({top:ctain.css("top"),left:ctain.css("left")});//切割显示图片新位置
				}
				
				
				//var ximg=e.pageX-_ximg;//移动时根据鼠标位置计算控件左上角的绝对位置
				//var yimg=e.pageY-_yimg;
				//img.css({top:yimg,left:ximg});//图片新位置
				
            }
        }).mouseup(function(){
        _move=false;
        /* wd.fadeTo("fast", 1); *///松开鼠标后停止移动并恢复成不透明
      });
    });
    
});
</script>
</html>

这个版本还有很多的HTML和CSS样式。之所以这样分开,是为了让Jquery代码更少,看起来容易抓住重点,方便理解

效果:http://oospace.sinaapp.com/cut.php

如大家所见,效果很粗糙,拖动到边界时有些生硬,当斜着拖动时,一旦其中一边接触边界便无法再动。

实现原理:

大家看了HTML代码应该就很清楚了,一共有三层

容器层:container,用来显示变暗的图片效果

切割层:imgLayer,用来显示被选中的图片区域

控制层:controlLayer,用来显示控制拖动效果和缩放效果(本版本暂未实现)

未完待续。。。

© 著作权归作者所有

yafasdfa
粉丝 1
博文 26
码字总数 10332
作品 0
苏州
私信 提问
JavaScript 图片切割效果

序一(08/07/21) 很久之前就在一个网站的截取相片的功能中看到这个效果,也叫图片裁剪、图片剪切(设置一下也可以做出放大镜等类似的效果)。 当时觉得很神奇,碍于水平有限,没做出来。 前...

青夜之衫
2017/12/05
0
0
opencv舌头监测模型+keras神经网络(LeNet)

基于前面使用opencv实现舌头模型检测后,本次主要针对模型参数调优,提高图片识别率。 之前的模型精准率很高,但召回率不一定为1,有时候舌头图片并没有被圈出。所以我们需要调整参数让模型吧...

Sheav
2018/08/20
0
0
基于matlab的图片处理(以图片验证码为例)

在一幅图像中,人们常常只对其中的一部分感兴趣,更重要的是,通常只有部分区域含有我们需要的某些重要的信息,这些部分通常占据一定的区域,并且具有某些特性(如灰度,轮廓,颜色和纹理等)...

qq_40996400
2018/05/23
0
0
车牌识别及验证码识别的一般思路

本文源自我之前花了2天时间做的一个简单的车牌识别系统。那个项目,时间太紧,样本也有限,达不到对方要求的95%识别率(主要对于车牌来说,D,0,O,I,1等等太相似了。然后,汉字的识别难度也...

最美的回忆
2017/01/13
0
0
推荐 Rails Paperclip 上传图片插件

文章转自:http://huacnlee.com/blog/rails-plugin-paperclip-for-image-upload Paperclip 是 Rails 的一个上传图片插件,它可以很方便的实现图片上传并切割指定大小的功能,使整个照片上传过...

鉴客
2011/07/28
2.8K
1

没有更多内容

加载失败,请刷新页面

加载更多

深入浅出Mybatis系列(三)---配置详解之properties与environments(mybatis源码篇)

上篇文章《深入浅出Mybatis系列(二)---配置简介(mybatis源码篇)》我们通过对mybatis源码的简单分析,可看出,在mybatis配置文件中,在configuration根节点下面,可配置properties、typeA...

须臾之余
6分钟前
1
0
OceanBase数据库实践入门——性能测试建议

概述 本文主要分享针对想压测OceanBase时需要了解的一些技术原理。这些建议可以帮助用户对OceanBase做一些调优,再结合测试程序快速找到适合业务的最佳性能。由于OceanBase自身参数很多、部署...

阿里云云栖社区
18分钟前
1
0
Java Web项目通过filter限制IP访问及路由拦截

背景 web开发中出于安全方面的考虑,对于后台管理项目通常会对用户访问做限制,常见的做法是硬件上设置白名单,过滤掉不需要的IP访问来保证管理平台的安全。但是在硬件操作不方便的情形之下,...

豫华商
21分钟前
3
0
nginx启动后页面还是打不开

是因为防火墙没有关闭 service iptables stop

米修米修er
31分钟前
1
0
使用JDK的观察者接口进行消息推送

观察者模式就是对对象内部的变化进行观察,当发生改变时做出相应的响应。代码样例见 设计模式整理 ! 因为观察者模式较为重要,使用频率较高,JDK早已经提供了内置的观察者接口以及被观察者父...

算法之名
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部