基于JavaScript实现图片剪切效果的示例代码（图）

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

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

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

图片剪切三层结构

1、第一层opacity,给图层设置透明度

2、第二层clip，clip属性：对图片进行裁剪，实现图像的一部分显示，其他部分进行隐藏

3、第三层选取框absolute（与第二层重叠的），包括八个触点的效果

html代码：

css代码：

二、javascript获取选择框偏移量

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

offsetLeft:元素相对于其父元素左边界的距离；

clientX：鼠标位置的横坐标；

clientWidth：元素的宽度；

offsetXY:是该事件发生的盒子模型里的坐标，与滚动条无关。

clientXY：是整个浏览器可用部分里的坐标，与滚动条无关，即需要拖动滚动条才能看到的区域不考虑。

pageXY：是整个网页里的坐标，与滚动条有关。

构造一个getPosition()函数，用于获取元素相对于屏幕左边及上边的距离

js代码如下：

三、javascript实现控制触点

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

注意区别：

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

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

1）点击右面的触点

js代码：

2）点击上面触点

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

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

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

变化示意图：

js代码：

3）点击左边触点

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

变化示意图：

js代码：

4）点击下面触点

增加的宽度 = 鼠标位置纵坐标 - 距屏幕上边的距离 - 原先的宽度

左上角的位置不需改变

js代码：

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

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

修改后的js代码如下：

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

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

四个方面图示：

js代码：

2）鼠标移动时会导致图片被选中，可在js代码中添加一行代码使其禁止图片被选中

也可以在css样式里添加 *{user-select:none}

意思是文本不可选中，对图片跟p有一样的效果。

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

首先要阻止事件冒泡

js代码如下：

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

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

html代码：

css代码：

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

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

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

以上就是基于JavaScript实现图片剪切效果的示例代码（图）的详细内容，更多请关注Gxl网其它相关文章！