学会如何获取鼠标的坐标位置以及监听鼠标的按下、拖动、松开等动作事件，从而实现拖动鼠标来改变图片大小。

还可以学习css中的clip属性。

一、CSS实现图片不透明及裁剪效果。

图片剪切三层结构
1、第一层opacity,给图层设置透明度
2、第二层clip，clip属性：对图片进行裁剪，实现图像的一部分显示，其他部分进行隐藏
3、第三层选取框absolute（与第二层重叠的），包括八个触点的效果

html代码：
 1 <div id="box">
 2     <img src="img/1.jpg" id="img1" />
 3     <img src="img/1.jpg" id="img2" />
 4     <div id="main">
 5         <div class="Divmin up-left"></div>
 6         <div class="Divmin up"></div>
 7         <div class="Divmin up-right"></div>
 8         <div class="Divmin right"></div>
 9         <div class="Divmin right-down"></div>
10         <div class="Divmin down"></div>
11         <div class="Divmin left-down"></div>
12         <div class="Divmin left"></div>
13     </div>
14 </div>

css代码：

 1  body{
 2         background: #333;
 3     }
 4     #box{
 5         width: 500px;
 6         height: 380px;
 7         position: absolute;
 8         top: 100px;
 9         left: 200px;
10     }
11     #img1,#img2{
12         position: absolute;
13         top: 0;
14         left: 0;
15     }
16     #img1{
17         opacity: 0.3;
18     }
19     #img2{
20         clip: rect(0,200px,200px,0);
21     }
22     #main{
23         position: absolute;/*第三层需用绝对定位浮在上面*/
24         width: 200px;
25         height: 200px;
26         border: 1px solid #fff;
27     }
28     .Divmin{
29         position: absolute;
30         width: 8px;
31         height: 8px;
32         background: #fff;
33     }
34     .up-left{margin-top: -4px;margin-left: -4px;cursor: nw-resize;}
35     .up{
36         left: 50%;/*父元素盒子main宽度的一半，注意要有绝对定位*/
37         margin-left:-4px;
38         top: -4px;
39         cursor: n-resize;
40     }
41     .up-right{top: -4px;right: -4px;cursor: ne-resize;}
42     .right{top: 50%;margin-top: -4px;right: -4px;cursor: e-resize;}
43     .right-down{right: -4px;bottom: -4px;cursor: se-resize;}
44     .down{bottom: -4px;left: 50%;margin-left: -4px;cursor: s-resize;}
45     .left-down{left: -4px;bottom: -4px;cursor: sw-resize;}
46     .left{left: -4px;top: 50%;margin-top: -4px;cursor: w-resize;}

二、javascript获取选择框偏移量

选择框鼠标拖动位置详解：

offsetLeft:元素相对于其父元素左边界的距离；
clientX：鼠标位置的横坐标；
clientWidth：元素的宽度；

offsetXY:是该事件发生的盒子模型里的坐标，与滚动条无关。clientXY：是整个浏览器可用部分里的坐标，与滚动条无关，即需要拖动滚动条才能看到的区域不考虑。pageXY：是整个网页里的坐标，与滚动条有关。

构造一个getPosition()函数，用于获取元素相对于屏幕左边及上边的距离js代码如下：
 1 //获取元素相对于屏幕左边及上边的距离，利用offsetLeft
 2     function getPosition(el){
 3         var left = el.offsetLeft;
 4         var top = el.offsetTop;
 5         var parent = el.offsetParent;
 6         while(parent != null){
 7             left += parent.offsetLeft;
 8             top += parent.offsetTop;
 9             parent = parent.offsetParent;
10         }
11         return {"left":left,"top":top};
12     }

三、javascript实现控制触点

监听鼠标的按下、拖动、松开的事件控制选取框的大小。

注意区别：

Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有的话）、边框和外边距。

即clientWidth不包括边框，offsetWidth包括边框

1）点击右面的触点

js代码：

 1     var mainDiv = $('main');
 2     var rightDiv = $('right');
 3     var isDraging = false;
 4     var contact = "";//表示被按下的触点
 5     //鼠标按下时
 6     rightDiv.onmousedown = function(){
 7         isDraging = true;
 8         contact = "right";
 9     }
10     //鼠标松开时
11     window.onmouseup = function(){
12         isDraging = false;
13     }
14     //鼠标移动时
15     window.onmousemove = function(e){
16         if(isDraging == true){
17             if(contact == "right"){
18                 var e = e||window.event;
19                 var x = e.clientX;//鼠标位置的横坐标
20                 var widthBefore = mainDiv.offsetWidth - 2;//选取框变化前的宽度
21                 //var widthBefore = mainDiv.clientWidth;
22                 var addWidth = x - getPosition(mainDiv).left - widthBefore;//鼠标移动后选取框增加的宽度
23                 mainDiv.style.width = widthBefore + addWidth + 'px';//选取框变化后的宽度
24             }
25         }
26     }
27
28 //获取id的函数
29 function $(id){
30     return document.getElementById(id);
31 }

2）点击上面触点

点击上面中间的触点移动时，选取框的高度和左上角的位置都需要变化。

增加的高度=选取框相对于屏幕上面的距离 - 鼠标位置的纵坐标

选取框左上角的top值要减去增加的高度，因为鼠标向上移动时高度增加，top值减小，下移时高度减小，top增大。

变化示意图：

js代码：

1 else if(contact == "up"){
2                 var y = e.clientY;//鼠标位置的纵坐标
3                 var heightBefore = mainDiv.offsetHeight - 2;//选取框变化前的高度
4                 var addHeight = getPosition(mainDiv).top - y;//增加的高度
5                 mainDiv.style.height = heightBefore + addHeight + 'px';//选取框变化后的宽度
6                 mainDiv.style.top = mainDiv.offsetTop - addHeight + 'px';//相当于变化后左上角的纵坐标，鼠标向上移纵坐标减小，下移增大
7             }

3）点击左边触点

原理同点击上面触点，宽度和左边的位置都会变化

变化示意图：

js代码：

1 else if(contact == "left"){
2                     var widthBefore = mainDiv.offsetWidth - 2;
3                     var addWidth = getPosition(mainDiv).left - e.clientX;//增加的宽度等于距离屏幕左边的距离减去鼠标位置横坐标
4                     mainDiv.style.width = widthBefore + addWidth + 'px';
5                     mainDiv.style.left = mainDiv.offsetLeft - addWidth + 'px';//左边的距离（相当于左边位置横坐标）等于选取框距父级元素的距离减去增加的宽度
6             }

 4）点击下面触点

增加的宽度 = 鼠标位置纵坐标 - 距屏幕上边的距离 - 原先的宽度左上角的位置不需改变js代码：
1 else if(contact = "down"){
2                 var heightBefore = mainDiv.offsetHeight - 2;
3                 var addHeight = e.clientY - getPosition(mainDiv).top - mainDiv.offsetHeight;
4                 mainDiv.style.height = heightBefore + addHeight + 'px';
5             }

5）点四个角时的变化是高度和宽度变化的叠加，所以最好将上面四个变化的过程封装成函数，便于维护和代码复用。

如果用if else 需要判断8次，所以改为switch语句来简化代码

修改后的js代码如下：

 1  window.onmousemove = function(e){
 2         var e = e||window.event;
 3         if(isDraging == true){
 4            switch (contact){
 5                case "up" : upMove(e);break;
 6                case "right" : rightMove(e);break;
 7                case "down" : downMove(e);break;
 8                case "left" : leftMove(e);break;
 9                case "up-right" : upMove(e);rightMove(e);break;
10                case "down-right" : downMove(e);rightMove(e);break;
11                case "down-left" : downMove(e);leftMove(e);break;
12                case "up-left" : upMove(e);leftMove(e);break;
13            }
14         }
15     }
16
17 //获取id的函数
18 function $(id){
19     return document.getElementById(id);
20 }
21 //获取元素相对于屏幕左边及上边的距离，利用offsetLeft
22     function getPosition(el){
23         var left = el.offsetLeft;
24         var top = el.offsetTop;
25         var parent = el.offsetParent;
26         while(parent != null){
27             left += parent.offsetLeft;
28             top += parent.offsetTop;
29             parent = parent.offsetParent;
30         }
31         return {"left":left,"top":top};
32     }
33     //up移动
34     function upMove(e){
35         var y = e.clientY;//鼠标位置的纵坐标
36         var heightBefore = mainDiv.offsetHeight - 2;//选取框变化前的高度
37         var addHeight = getPosition(mainDiv).top - y;//增加的高度
38         mainDiv.style.height = heightBefore + addHeight + 'px';//选取框变化后的宽度
39         mainDiv.style.top = mainDiv.offsetTop - addHeight + 'px';//相当于变化后左上角的纵坐标，鼠标向上移纵坐标减小，下移增大
40     }
41     //right移动
42     function rightMove(e){
43         var x = e.clientX;//鼠标位置的横坐标
44         var widthBefore = mainDiv.offsetWidth - 2;//选取框变化前的宽度
45         //var widthBefore = mainDiv.clientWidth;
46         var addWidth = x - getPosition(mainDiv).left - widthBefore;//鼠标移动后选取框增加的宽度
47         mainDiv.style.width = widthBefore + addWidth + 'px';//选取框变化后的宽度
48     }
49     //down移动
50     function downMove(e){
51         var heightBefore = mainDiv.offsetHeight - 2;
52         var addHeight = e.clientY - getPosition(mainDiv).top - mainDiv.offsetHeight;
53         mainDiv.style.height = heightBefore + addHeight + 'px';
54     }
55     //left移动
56     function leftMove(e){
57         var widthBefore = mainDiv.offsetWidth - 2;
58         var addWidth = getPosition(mainDiv).left - e.clientX;//增加的宽度等于距离屏幕左边的距离减去鼠标位置横坐标
59         mainDiv.style.width = widthBefore + addWidth + 'px';
60         mainDiv.style.left = mainDiv.offsetLeft - addWidth + 'px';//左边的距离（相当于左边位置横坐标）等于选取框距父级元素的距离减去增加的宽度
61     }

四、实现选取框区域明亮显示

1）选取框内的第二层图片需重新设置其clip属性

四个方面图示：

js代码：

1  //设置选取框图片区域明亮显示
2     function setChoice(){
3         var top = mainDiv.offsetTop;
4         var right = mainDiv.offsetLeft + mainDiv.offsetWidth;
5         var bottom = mainDiv.offsetTop + mainDiv.offsetHeight;
6         var left = mainDiv.offsetLeft;
7         img2.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
8     }

2）鼠标移动时会导致图片被选中，可在js代码中添加一行代码使其禁止图片被选中
 //禁止图片被选中document.onselectstart = new Function('event.returnValue = false;');

也可以在css样式里添加 *{user-select:none}意思是文本不可选中，对图片跟div有一样的效果。

五、实现选取框位置可拖动

首先要阻止事件冒泡js代码如下：
 //鼠标按下触点时rightDiv.onmousedown = function(e){e.stopPropagation();isDraging = true;contact = "right";}

鼠标拖拽效果的实现可见另一篇随笔http://www.cnblogs.com/vampire170204/p/6422914.html

六、实现图片剪切区域预览

新增一个图片预览区域的div

html代码：

<div id="preview"><img src="img/1.jpg" id="img3" />
</div>

css代码：

#preview{position: absolute;width: 500px;height: 380px;top: 100px;left:710px ;}#preview #img3{position: absolute;}

注意：要让clip:rect(top,right,bottom,left) 起作用，必须让作用元素为相对/绝对定位。

js部分同样是利用clip属性，和setChoice()函数同时被调用

同时为了让右边预览区的左上角位置固定，需要设置其top和left的值

 1 //右边图片预览函数
 2     function setPreview(){
 3         var top = mainDiv.offsetTop;
 4         var right = mainDiv.offsetLeft + mainDiv.offsetWidth;
 5         var bottom = mainDiv.offsetTop + mainDiv.offsetHeight;
 6         var left = mainDiv.offsetLeft;
 7         var img3 = $('img3');
 8         img3.style.top = -top + 'px';
 9         img3.style.left = -left + 'px';
10         img3.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
11     }





转载于:https://www.cnblogs.com/Lovebugs/p/6506029.html
												


											

用JavaScript实现图片剪切效果相关推荐
	

    
								
  1. JavaScript实现图片剪切效果
		
    慕课网的学习视频笔记:http://www.imooc.com/learn/144. 实现过程分两部分: 1.使用CSS进行页面布局 (1)通过3层来实现,最底层的固定不动半透明图片,中间层的部分不透 ...
    
		
    2. 
						
  2. javascript图片剪切效果
		
    序一(08/07/21) 很久之前就在一个网站的截取相片的功能中看到这个效果,也叫图片裁剪.图片剪切(设置一下也可以做出放大镜等类似的效果). 当时觉得很神奇,碍于水平有限,没做出来. 前些日子突然想 ...
    
		
    3. 
						
  3. javascript实现图片放大镜效果
		
    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...
    
		
    4. 
						
  4. 【小5聊】纯javascript实现图片放大镜效果
		
    实现图片放大镜效果,其实就是一个比例放大的效果 以下通过纯javascript方式对图片进行等比例放大,等比倍数和出界判断可自行实现 文章后面会附上全部代码 放大镜效果  1. 放大镜组成 1)目标图 ...
    
		
    5. 
						
  5. 用JavaScript完成图片爆炸效果
		
    开发工具与关键技术:Adobe Dreamweaver CC 2017 JavaScript 作者:孙水兵 撰写时间:2019年2月15 案例来源于51ct学院李游 图片爆炸效果就是将一张图片碎成若干 ...
    
		
    6. 
						
  6. javascript实现图片滚动效果
		
    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
    
		
    7. 
						
  7. html5 图片粒子效果,Canvas + JavaScript 制作图片粒子效果
		
    首先看一下源图和转换成粒子效果的对比图: 左侧图片为源图,右侧图片为粒子效果图.该效果是在Canvas画布上制作的.将图片制作成粒子效果相对而言是比较简单的.重点了解两个知识点即可 1:图片是通过im ...
    
		
    8. 
						
  8. css 剪辑图片_使用CSS的clip-path实现图片剪切效果
		
    最近有个业务需求:校对图片文本信息,如下图所示,当鼠标点击文本中某一行的时候,文本上会显示对应行图片同时左侧会显示对应位置的画框. clip-path 今天要说的主题是:如何剪切原图中的部分图片?(前 ...
    
		
    9. 
						
  9. CSS3配合JavaScript图片爆炸效果
		
    CSS3配合JavaScript实现图片爆炸效果 先看看效果图: 代码如下: boom.html <!DOCTYPE html> <html lang="en"& ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. JAVA实现替换空格（《剑指offer》）
		
    2. 
						
  2. 设计模式[3] -单例模式-代码
		
    3. 
						
  3. 获取父窗口元素或者获取iframe中的元素（相同域名下）
		
    4. 
						
  4. java 星期顺序_第8周 【项目3-顺序串算法】
		
    5. 
						
  5. Ehcache学习总结(2)--Ehcache整合spring配置
		
    6. 
						
  6. Leetcode每日一题：164.maximum-gap（最大间距）
		
    7. 
						
  7. 《推荐系统笔记（十）》CTR预估以及一般算法介绍（GBDT+LR）
		
    8. 
						
  8. C++编程技术常见问题有哪些？
		
    9. 
						
  9. Atitit gui的实现模式文本  dom ast 像素绘图api native   目录 1. Pl ast  xml domAst	1 1.1. 简介	1 1.1.1. 【具体语法树】	2 2.
		
    10. 
						
  10. buuctf-变异凯撒
		
    11. 
						
  11. 史上最全4S店维修潜规则 看完绝不被坑
		
    12. 
						
  12. jsr、jcp和harmony的介绍
		
    13. 
						
  13. 单片机p1口亮灯c语言代码,单片机闪烁灯汇编语言源代码大全（四款闪烁灯的汇编语言源代码）...
		
    14. 
						
  14. 写给Python程序员的PHP快速入门教程
		
    15. 
						
  15. 深度学习中数据的拆分打乱
		
    16. 
						
  16. Shell编程之第二讲——shell 的变量
		
    17. 
						
  17. 手机照片压缩的快捷方法
		
    18. 
						
  18. 【Linux】实验报告8 Linux文件系统
		
    19. 
						
  19. Centos7离线安装gcc4.8
		
    20. 
						
  20. 通过微信公众号给女朋友推送消息
		
    21. 
		

	


热门文章
	

    
									
  1. java9 opens与exports的区别
			
    2. 
						
  2. 初识Qt Creator
			
    3. 
						
  3. Redis学习笔记（11）——Redis缓存集群方案
			
    4. 
						
  4. 【152】C# 操作 Excel 杂记
			
    5. 
						
  5. PPRevealSideViewController
			
    6. 
						
  6. Android学习笔记之android:collapseColumns,android:shrinkColumns和stretchColumn
			
    7. 
						
  7. android studio设置JDK路径
			
    8. 
						
  8. 图像中某点绕点旋转后的坐标，图像旋转坐标位置
			
    9. 
						
  9. kotlin学习笔记——lambda表达式
			
    10. 
						
  10. ASP.NET Core 中间件（Middleware）详解
			
    11.