文档章节

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

yafasdfa
 yafasdfa
发布于 2014/12/29 13:35
字数 1113
阅读 122
收藏 9

相对于上一个版本,

1,这次修复了container位置在左上角的bug,

2,容器container大小改为图片本身大小,

3,控制层controlLayer以及切割显示层imgLayer改为通过js初始化(方便以后添加调整)

4,容器container位置也可以随意调整而不影响其它功能

5,添加部分缩放功能,本地测试OK,发布异常(无语,继续修改中,测试发现是布局使用了left:50%;然后margin-left:-500px;导致异常,)

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

源码:https://github.com/OoSpace/PicCut/blob/master/PicCut.html

代码:

 <!<!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;
 border:1px solid black;
 border-radius:3px;
 background-color:#000000;
 
}
.imgLayer{
 position:absolute;
}
.controlLayer{
 position:absolute;
 zoom:1;
 border:1px dashed black;
 /*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%;
 margin-top:-4px;
 left:-3px;
 cursor: w-resize;
}
.topCenter{
 position:absolute;
 top:-3px;
 left:50%;
 margin-left:-4px;
 cursor: ns-resize;
}
.rightTop{
 position:absolute;
 top:-3px;
 right:-3px;
 cursor: ne-resize;
}
.rightCenter{
 position:absolute;
 top:50%;
 margin-top:-4px;
 right:-3px;
 cursor: e-resize;
}
.leftBottom{
 position:absolute;
 bottom:-3px;
 left:-3px;
 cursor: ne-resize;
}
.bottomCenter{
 position:absolute;
 bottom:-3px;
 left:50%;
 margin-left:-4px;
 cursor: s-resize;
}
.rightBottom{
 position:absolute;
 bottom:-3px;
 right:-3px;
 cursor: se-resize;
}
#imgStyle{
 display:none;
}
#rect{
 position:absolute;
 right:0px;
}
</style>
<body>
<img  id="imgStyle" />
    <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>
 
 <div id="rect"></div>
</body>
<script  type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script>
//拖动效果代码
//var _z=9999;
$(document).ready(function(){
var img=$(".imgLayer");//图片切割层
var ctain=$(".container");//容器
var imgStyle=$("#imgStyle")//
//初始化图片地址(注意,只能在onload之前添加图片才有效) 
imgStyle.attr("src","cut.jpg");//图片地址
ctain.css({background:"url(cut.jpg) top  left  no-repeat"});
img.css({background:"url(cut.jpg) top  left  no-repeat"});

 var _move=false;//移动标记
 var _x,_y;//鼠标离控件左上角的相对位置
 var wd;//窗口
 
 
 //设置宽度和高度
 
    $(".controlLayer").click(function(){
        //alert("click");//点击(松开后触发)
     this.style.cursor = "default";//鼠标形状
     //this.style.zIndex = 999;
        }).mousedown(function(e){
  
        _move=true;//移动
  _zoom=false;//缩放
  
        wd=$(this);
        this.style.cursor = "move";//鼠标形状
        //this.style.zIndex = _z;//窗口层次
        //_z++;
  
        _x=e.pageX-(isNaN(parseInt(wd.css("left")))?0:parseInt(wd.css("left")));
        _y=e.pageY-(isNaN(parseInt(wd.css("top")))?0:parseInt(wd.css("top")));
  
  $(".mark").mousemove(function(){
   _zoom=true;
  }).mouseup(function(){
   _zoom=false;
   
  })
       /*  wd.fadeTo(20, 0.25); *///点击后开始拖动并透明显示
        $(document).mousemove(function(e){
           
                var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
                var y=e.pageY-_y;
    
    //$("#rect").html(x+" " +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 l_wd=parseInt(wd.css("left"));
    var t_wd=parseInt(wd.css("top"));
    var  w_wd=parseInt(wd.css("width"));
    var  h_wd=parseInt(wd.css("height"));
    
    var  imgLeft=parseInt(imgStyle.css("left"));
    var imgTop=parseInt(imgStyle.css("top"));
    
    l_ctn=isNaN(l_ctn)?0:l_ctn;
    t_ctn=isNaN(t_ctn)?0:t_ctn;
    
    
    
    if(_move&&!_zoom){ 
    
    //设置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)&&(x>=l_ctn)&&h_ctn>=(y+h_wd-t_ctn)&&(y>=t_ctn)){
     wd.css({left:x,top:y});//控件新位置
     img.css("clip",rect);//切割位置
     
     $("#rect").html(rect);
    }
    
            }else if(_move&&_zoom){
   
    wd.css({width:e.pageX-l_wd,height:e.pageY-t_wd});
    
    var rect="rect( "+(t_wd-t_ctn)+"px  "+(e.pageX-l_ctn)+"px  "+(e.pageY-t_ctn)+"px  "+(l_wd-l_ctn)+"px )";
    img.css("clip",rect);//切割位置
    
    $("#rect").html(e.pageX+" "+e.pageY);
   }
        }).mouseup(function(){
        _move=false;
        /* wd.fadeTo("fast", 1); *///松开鼠标后停止移动并恢复成不透明
      });
    
 
  
 
 });
    
});

//初始化
window.onload=function(){
 
 var img=$(".imgLayer");//图片切割层
 var ctain=$(".container");//容器
 var imgStyle=$("#imgStyle")//
 var control=$(".controlLayer");
  
 var  imgWidth=imgStyle.css("width");//注意只能放在window.onload里面,因为只有图片加载完毕以后才能它的获取大小
 var  imgHeight=imgStyle.css("height");
 
 
 
 var  imgLeft=30;//初始化container的位置
 var imgTop=40;
 
 img.css({width:imgWidth,height:imgHeight});//根据图片本身大小自动设置容器层container和图片切割层的大小
 ctain.css({width:imgWidth,height:imgHeight,opacity:"0.4",filter:"alpha(opacity=40)",left:imgLeft+"px",top:imgTop+"px"});
 
 var  lf=imgLeft;//初始化控制层controlLayer大小及切割显示层imgLayer大小
 var tp=imgTop;
 var wt=ht=90;
   
 lf=isNaN(lf)?0:lf;
 tp=isNaN(tp)?0:tp;
 //调整三层的位置
 control.css({left:lf+"px",top:tp+"px",width:wt+"px",height:ht+"px"});
 ctain.css({left:lf+"px",top:tp+"px"});
 img.css({left:lf+"px",top:tp+"px"});
 
 //初始化切割层显示区域
 var rect="rect( "+0+"px  "+wt+"px  "+ht+"px  "+0+"px )";
 img.css({"clip":rect});
 $("#rect").html(img.css("clip"));
}
</script>
</html>

© 著作权归作者所有

yafasdfa
粉丝 1
博文 26
码字总数 10332
作品 0
苏州
私信 提问
基于matlab的图片处理(以图片验证码为例)

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

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

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

最美的回忆
2017/01/13
0
0
Java基于opencv实现图像数字识别(五)—投影法分割字符

Java基于opencv实现图像数字识别(五)—投影法分割字符 水平投影法 1、水平投影法就是先用一个数组统计出图像每行黑色像素点的个数(二值化的图像); 2、选出一个最优的阀值,根据比这个阀值大...

奇迹迪
2018/07/03
0
0
JavaScript 图片切割效果

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

青夜之衫
2017/12/05
0
0
【PHP7源码分析】PHP7语言的执行原理

我们常用的高级语言有很多种,比较出名的有CC++、Python、 PHP、Go、Pascal等。而这些语言根据运行的方式不同,大体分为两种:编译型语言和解释型语言。 其中,编译型语言包括CC++、Pascal、...

陈雷_顺风车
2018/08/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Docker搭建Mysql集群、主从同步复制

1、创建数据挂载点: mkdir /opt/mysql-master/mysql、/opt/mysql-master/conf.d、/opt/mysql-slave/conf.d、/opt/mysql-slave/conf.d 2、分别在master、slave节点文件目录conf.d下创建touch......

WALK_MAN
15分钟前
0
0
手把手教你做中间件开发(分布式缓存篇)-借助redis已有的网络相关.c和.h文件,半小时快速实现一个epoll异步网络框架,程序demo

本文档配合主要对如下demo进行配合说明: 借助redis已有的网络相关.c和.h文件,半小时快速实现一个epoll异步网络框架,程序demo 0. 手把手教你做中间件、高性能服务器、分布式存储技术交流群 ...

y123456yz
16分钟前
0
0
阿里技术男的成长史:越想证明自己死得越快……

在上海工作8年后,身为部门经理的钱磊,管理着一家ERP公司的百十来号员工,“再往上爬就是老板和他儿子了……从这个领域的技术角度来讲算是做到了顶。”05年,钱磊就开始关注一家名字奇怪,做...

阿里云云栖社区
20分钟前
1
0
Spring-boot单元测试(私有方法测试)

Spring-boot的单元测试网上有了很多,当项目是可以使用spring-boot正常运行时,只要在测试类上添加如下配置就使用@Autowired的方式进行单元测试 @RunWith(SpringJUnit4ClassRunner.class)@...

琴兽
37分钟前
0
0
spring cloud(第一部)框架概述

关于微服务 近几年,'微服务'这个词越来越多的被身边的人所提及,到底什么是微服务,为什么微服务总是伴随着spring cloud被人们所提及,这里笔者结合多年的技术经历跟大家分享下自己的理解:...

白中墨
37分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部