原生 JavaScript 图片裁剪效果

Posted 2020-07-13 ╭ 儛動嘚靈魂

图片裁剪程序效果如下，可鼠标操作。 

 

 

拖动左边小方框时在右侧实时显示对应的裁剪图片，同时左侧的拖动框里图片完全显示，拖动框外部图片模糊显示。8个控制点可以对显示区域大小进行控制。

html 和 CSS 部分

左侧的裁剪操作区域可以分为三层。 最底层的图片半透明效果；中间层的图片只显示制定区域，其他部分隐藏；最上层为拖拽控制层。最低层和中间层使用同一张图片，利用CSS属性clip控制中间层只显示一部分。 三个层都使用 absolute 绝对定位。下面是 HTML 和 CSS 代码。

 1 <div id="cArea">  
 2     <img src="./storm.jpg" alt="storm.jpg" class="baseImg">  <!-- 最底层半透明图片 -->
 3     <img src="./storm.jpg" alt="storm.jpg" id="clipImg" class="clipImg"> <!--中间层图片-->
 4     <div id="drag"> <!--拖拽控制层-->
 5         <div id="cRightDown" class="dragDot"></div>
 6         <div id="cLeftDown" class="dragDot"></div>
 7         <div id="cRightUp" class="dragDot"></div>
 8         <div id="cLeftUp" class="dragDot"></div>
 9         <div id="cRight" class="dragDot"></div>
10         <div id="cDown" class="dragDot"></div>
11         <div id="cLeft" class="dragDot"></div>
12         <div id="cUp" class="dragDot"></div>
13     </div>
14 </div>  

涉及到技巧有：元素居中显示，clip裁剪，除此外都是很简单的东西。

 1 #cArea{position: relative;overflow: hidden;width: 600px;height: 390px;}
 2 .baseImg{position: absolute;top: 0;left: 0;opacity: .3;}
 3 .clipImg{position: absolute;top: 0;left: 0;clip: rect(0 200px 200px 0);}
 4 #drag{width: 200px;height: 200px;position: absolute;border: 1px dashed #eee;cursor: move;box-sizing: border-box;z-index: 999;}
 5 .dragDot{width: 6px;height: 6px;background: #fff;border: 1px solid #888;position: absolute;opacity: 0.8;}
 6 #cLeftUp{top: -4px;left: -4px;cursor: nw-resize;}
 7 #cUp{top: -4px;left: 50%;margin-left: -4px;cursor: n-resize;}
 8 #cRightUp{top: -4px;right: -4px;cursor: ne-resize;}
 9 #cRight{right: -4px;top: 50%;margin-top: -4px;cursor: e-resize;}
10 #cRightDown{bottom: -4px;right: -4px;cursor: nw-resize;}
11 #cDown{bottom: -4px;left: 50%;margin-left: -4px;cursor: n-resize;}
12 #cLeftDown{bottom: -4px;left: -4px;cursor: ne-resize;}
13 #cLeft{left: -4px;top: 50%;margin-top: -4px;cursor: e-resize;}   

JS控制整体拖拽

首先完成鼠标拖拽控制区时对应的区域图片完全显示，其他部分隐藏。 
计算鼠标从一个地方拖动到另一个地方时拖拽区的移动数据，要使用到一些 html 元素属性和鼠标事件。

属性	说明
MouseEvent.clientX	鼠标相对浏览器窗口的水平坐标
MouseEvent.clientY	鼠标相对浏览器窗口的垂直坐标
HTMLElement.offsetHeight	元素的像素高度
HTMLElement.offsetWidth	元素的像素宽度
HTMLElement.offsetLeft	元素左边界相对于父元素的左边界偏移的像素值
HTMLElement.offsetHeight	元素上边界相对于父元素的上边界偏移的像素值

在鼠标按下拖拽区域后（mousedown事件），立即记录此时鼠标的 X1 Y1 坐标位置，以及此时拖拽区域相对图片层的左边界距离L，上边界距离T。在鼠标进行移动时记录移动过程中的 X2 Y2 坐标位置。拖拽区域的left和top属性值分别为：X2-X1+L 和 Y2-Y1+T。 原理如图

代码如下

 1 function $(id){  
 2     return document.getElementById(id)
 3 };
 4 var cArea = $(‘cArea‘);        // 图片容器  
 5 var clipImg = $(‘clipImg‘);    // 裁剪层  
 6 var drag = $(‘drag‘);          // 拖拽区域  
 7 var previewImg = $(‘previewImg‘); //预览图  
 8 var cAreaH = cArea.offsetHeight;  // 图片显示区的高度  
 9 var cAreaW = cArea.offsetWidth;   // 图片显示区的宽度  
10 var cAreaTop = getPosition(cArea).Y; //图片容器距离浏览器上边界距离  
11 var cAreaLeft = getPosition(cArea).X; //图片容器距离浏览器左边界距离  
12 var mousePosition,mouseStartX,mouseStartY,dragLeft,dragTop,dragMaxH,dragMaxW // 定义按下鼠标时产生的变量
13 
14 drag.addEventListener(‘mousedown‘, startDrag, false);  // 给拖拽区添加鼠标按下事件
15 
16 function startDrag(e) {  
17     e.preventDefault();
18     mouseStartX = e.clientX;    // 刚按下鼠标时 鼠标相对浏览器边界的 X 坐标
19     mouseStartY = e.clientY;    // 刚按下鼠标时 鼠标相对浏览器边界的 Y 坐标
20     dragLeft = drag.offsetLeft; // 刚按下鼠标时 裁剪区的距离图片显示区 左 边界距离
21     dragTop = drag.offsetTop;   // 刚按下鼠标时 裁剪区的距离图片显示区 上 边界距离
22     dragMaxH = cAreaH - drag.offsetHeight;  // 垂直最大范围
23     dragMaxW = cAreaW - drag.offsetWidth;   // 水平最大范围
24     mousePosition = e.target.id; // 判断按下位置
25     document.addEventListener(‘mousemove‘, dragging, false);
26     document.addEventListener(‘mouseup‘, clearDragEvent, false);
27 };
28 
29 // 鼠标松开时释放事件
30 function clearDragEvent(e) {  
31     document.removeEventListener(‘mousemove‘, dragging, false);
32     document.removeEventListener(‘mouseup‘, clearDragEvent, false)
33 };
34 
35 // 整体拖拽
36 function dragMove(e) {  
37     var moveX = e.clientX - mouseStartX; // 拖拽中 鼠标坐标变化值
38     var moveY = e.clientY - mouseStartY; // 拖拽中 鼠标坐标变化值
39     var destinationX = Math.min((moveX + dragLeft), dragMaxW); // 限制拖动的最大范围，避免超出右和下边界
40     var destinationY = Math.min((moveY + dragTop), dragMaxH);  // 限制拖动的最大范围，避免超出右和下边界
41     drag.style.left = destinationX < 0 ? 0 : destinationX + ‘px‘; // 限制最小范围，避免超出上和左边界
42     drag.style.top = destinationY < 0 ? 0 : destinationY + ‘px‘;  // 限制最小范围，避免超出上和左边界
43     setClip();
44 };           

 

JS 控制八个点的拖动

拖拽有八个点控制点，实际只需要写上下左右四个方法就可实现，四个角落的拖拽分别同时对应左上，右上，左下，右下。以上方中间控制点为例，当拖拽此点时，拖拽显示区水平位置并没有变化，只是本身的高度和距离父元素顶部距离发生改变。获取到拖拽区距离浏览器上边界距离 dragY，再获取到鼠标上下拖拽时鼠标的垂直坐标 mouseY。拖拽区的高度变化就等于dragY-mouseY。也很容易看出拖拽区top属性值变化就等于他原来距离父元素的距离减去自身高度变化。效果如下图：

代码如下：

1 // 上方边框拖动
2 function upMove(e) {  
3     var draggingY = e.clientY; // 鼠标Y坐标 
4     if(draggingY < cAreaTop) draggingY = cAreaTop; //防止跑出图片上边界
5     var dragY = getPosition(drag).Y;  // 拖拽区距离父元素边界
6     var changeHeight = dragY - draggingY; //改变高度
7     drag.style.top = drag.offsetTop - dragY + draggingY + ‘px‘;
8     drag.style.height = drag.offsetHeight + changeHeight + ‘px‘;
9 };

 

下面中间点与此类似，左右也是同样计算到方法。当然还可以将上下何在一起，左右合在一起。

 1 // 上下方向的边框拖动
 2 function upDownMove(e, str) {  
 3     var draggingY = e.clientY;
 4     if(draggingY < cAreaTop) draggingY = cAreaTop;
 5     if(draggingY > cAreaTop + cAreaH) draggingY = cAreaTop + cAreaH;
 6     var dragY = getPosition(drag).Y;
 7     if(str === ‘up‘){
 8         var changeHeight = dragY - draggingY;
 9         drag.style.top = drag.offsetTop - dragY + draggingY + ‘px‘;
10     } else if(str === ‘down‘) {
11         var changeHeight = draggingY - drag.offsetHeight - dragY;
12     }
13     drag.style.height = drag.offsetHeight + changeHeight + ‘px‘;
14     setClip();
15 };
16 
17 // 水平方向的边框拖动
18 function leftRightMove(e, str) {  
19     var draggingX = e.clientX;
20     if(draggingX < cAreaLeft) draggingX = cAreaLeft;
21     if(draggingX > cAreaLeft + cAreaW) draggingX = cAreaLeft + cAreaW;
22     var dragX = getPosition(drag).X;
23     if(str === ‘left‘) {
24         var changeWidth = dragX - draggingX;
25         drag.style.left = drag.offsetLeft - changeWidth + ‘px‘;
26     } else if(str === ‘right‘) {
27         var changeWidth = draggingX - drag.offsetWidth - dragX;
28     }
29     drag.style.width = drag.offsetWidth + changeWidth + ‘px‘;
30     setClip();
31 };

中间层和拖拽区以及预览区的同步显示

这个非常简单，知道了拖拽区的坐标和尺寸，就很容易计算出中间层clip属性值。

 1 function setClip() {   // 显示层  
 2     var clipTop = drag.offsetTop;
 3     var clipLeft = drag.offsetLeft;
 4     var clipRight = drag.offsetWidth + drag.offsetLeft;
 5     var clipBottom = drag.offsetHeight + drag.offsetTop;
 6     clipImg.style.clip = ‘rect(‘ + clipTop + ‘px ‘ + clipRight + ‘px ‘ + clipBottom + ‘px ‘ + clipLeft + ‘px)‘;
 7     setPreview({top: clipTop, right: clipRight, bottom: clipBottom, left: clipLeft})
 8 };
 9 function setPreview(clip){ // 预览图  
10     previewImg.style.top = -clip.top + ‘px‘;
11     previewImg.style.left = -clip.left + ‘px‘;
12     previewImg.style.clip = ‘rect(‘ + clip.top + ‘px ‘ + clip.right + ‘px ‘ + clip.bottom + ‘px ‘+ clip.left + ‘px)‘;
13 };