学会如何获取鼠标的坐标位置以及监听鼠标的按下、拖动、松开等动作事件，从而实现拖动鼠标来改变图片大小。
还可以学习css中的clip属性。
一、CSS实现图片不透明及裁剪效果。
图片剪切三层结构
1、第一层opacity,给图层设置透明度
2、第二层clip，clip属性：对图片进行裁剪，实现图像的一部分显示，其他部分进行隐藏
3、第三层选取框absolute（与第二层重叠的），包括八个触点的效果
css代码：
二、javascript获取选择框偏移量
选择框鼠标拖动位置详解：
offsetLeft:元素相对于其父元素左边界的距离；
clientX：鼠标位置的横坐标；
clientWidth：元素的宽度；
offsetXY:是该事件发生的盒子模型里的坐标，与滚动条无关。
clientXY：是整个浏览器可用部分里的坐标，与滚动条无关，即需要拖动滚动条才能看到的区域不考虑。
pageXY：是整个网页里的坐标，与滚动条有关。
构造一个getPosition()函数，用于获取元素相对于屏幕左边及上边的距离
js代码如下：
三、javascript实现控制触点
监听鼠标的按下、拖动、松开的事件控制选取框的大小。
Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有的话）、边框和外边距。
即clientWidth不包括边框，offsetWidth包括边框
1）点击右面的触点
js代码：
增加的宽度
mainDiv.style.width = widthBefore + addWidth + 'px';//选取框变化后的宽度
}
}
}
//获取id的函数
function $(id){
return document.getElementById(id);
}
2）点击上面触点
点击上面中间的触点移动时，选取框的高度和左上角的位置都需要变化。
增加的高度=选取框相对于屏幕上面的距离 - 鼠标位置的纵坐标
选取框左上角的top值要减去增加的高度，因为鼠标向上移动时高度增加，top值减小，下移时高度减小，top增大。
变化示意图：
js代码：
增加的高度
mainDiv.style.height = heightBefore + addHeight + 'px';//选取框变化后的宽度
mainDiv.style.top = mainDiv.offsetTop - addHeight + 'px';//相当于变化后左上角的纵坐标，鼠标向上移纵坐标减小，下移增大
}
3）点击左边触点
原理同点击上面触点，宽度和左边的位置都会变化
变化示意图：
js代码：
增加的宽度等于距离屏幕左边的距离减去鼠标位置横坐标
mainDiv.style.width = widthBefore + addWidth + 'px';
mainDiv.style.left = mainDiv.offsetLeft - addWidth + 'px';//左边的距离（相当于左边位置横坐标）等于选取框距父级元素的距离减去增加的宽度
}
4）点击下面触点
增加的宽度 = 鼠标位置纵坐标 - 距屏幕上边的距离 - 原先的宽度
左上角的位置不需改变
js代码：
5）点四个角时的变化是高度和宽度变化的叠加，所以最好将上面四个变化的过程封装成函数，便于维护和代码复用。
如果用if else 需要判断8次，所以改为switch语句来简化代码
获取id的函数
function $(id){
return document.getElementById(id);
}
//获取元素相对于屏幕左边及上边的距离，利用offsetLeft
function getPosition(el){
var left = el.offsetLeft;
var top = el.offsetTop;
var parent = el.offsetParent;
while(parent != null){
left += parent.offsetLeft;
top += parent.offsetTop;
parent = parent.offsetParent;
}
return {"left":left,"top":top};
}
//up移动
function upMove(e){
var y = e.clientY;//鼠标位置的纵坐标
var heightBefore = mainDiv.offsetHeight - 2;//选取框变化前的高度
var addHeight = getPosition(mainDiv).top - y;//增加的高度
mainDiv.style.height = heightBefore + addHeight + 'px';//选取框变化后的宽度
mainDiv.style.top = mainDiv.offsetTop - addHeight + 'px';//相当于变化后左上角的纵坐标，鼠标向上移纵坐标减小，下移增大
}
//right移动
function rightMove(e){
var x = e.clientX;//鼠标位置的横坐标
var widthBefore = mainDiv.offsetWidth - 2;//选取框变化前的宽度
//var widthBefore = mainDiv.clientWidth;
var addWidth = x - getPosition(mainDiv).left - widthBefore;//鼠标移动后选取框增加的宽度
mainDiv.style.width = widthBefore + addWidth + 'px';//选取框变化后的宽度
}
//down移动
function downMove(e){
var heightBefore = mainDiv.offsetHeight - 2;
var addHeight = e.clientY - getPosition(mainDiv).top - mainDiv.offsetHeight;
mainDiv.style.height = heightBefore + addHeight + 'px';
}
//left移动
function leftMove(e){
var widthBefore = mainDiv.offsetWidth - 2;
var addWidth = getPosition(mainDiv).left - e.clientX;//增加的宽度等于距离屏幕左边的距离减去鼠标位置横坐标
mainDiv.style.width = widthBefore + addWidth + 'px';
mainDiv.style.left = mainDiv.offsetLeft - addWidth + 'px';//左边的距离（相当于左边位置横坐标）等于选取框距父级元素的距离减去增加的宽度
}
四、实现选取框区域明亮显示
四个方面图示：
js代码：
图片区域明亮显示
function setChoice(){
var top = mainDiv.offsetTop;
var right = mainDiv.offsetLeft + mainDiv.offsetWidth;
var bottom = mainDiv.offsetTop + mainDiv.offsetHeight;
var left = mainDiv.offsetLeft;
img2.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
}
2）鼠标移动时会导致图片被选中，可在js代码中添加一行代码使其禁止图片被选中
禁止图片被选中
document.onselectstart = new Function('event.returnValue = false;');
也可以在css样式里添加 *{user-select:none}
五、实现选取框位置可拖动
首先要阻止事件冒泡
js代码如下：
鼠标拖拽效果的实现可见另一篇随笔
六、实现图片剪切区域预览
新增一个图片预览区域的div
css代码：