本文是利用一个css的属性clip，我肯定有很多人都不知道这个属性，因为这个属性用到的太少了，只是在特定的条件下才会用到这个属性。这里我就跟大家大致的说一下它的用法，想要了解更多这个属性的可以去查阅一下资料，在这里跟不跟大家说了。这里主要是讲如何利用这个属性实现选取图片的功能。
想要了解clip 这个属性，首先要知道这个属性的语法：clip：rect（top，right，bottom，left），clip属性的特点就是只显示这些值包裹的区域，其他的区域全都隐藏。
选取图片这个功能大只分为三个部分：
第一个部分：就是只用作展示的一张图片，这张图片上不做任何的功能处理。
第二个部分：也是一张图片，这张图片覆盖在第一章图片的上面，利用clip属性只显示选取的部分，其他的隐藏。
第三个部分：是利用canvas的图片接口把选择的图片区域绘制在预览区域
大致的效果如图所示：
接下来直接上代码，本人是初学者，能力有限，欢迎各位大神指点。
HTML部分：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片裁剪</title> <script src="js/test.js" ></script> <script src="js/jquery-1.8.1.min.js" ></script> <script src="js/jquery-ui-1.10.4.custom.min.js" ></script> <script src="js/rem.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="box"> <img src="images/1.jpg" id="img1"/> <img src="images/1.jpg" id="img2"/> <div id="main"> <div class="div minDiv" id="up"></div> <div class="div minDiv2" id="left_up"></div> <div class="div minDiv3" id="right_up"></div> <div class="div minDiv4" id="left"></div> <div class="div minDiv5" id="right"></div> <div class="div minDiv6" id="left_down"></div> <div class="div minDiv7" id="down"></div> <div class="div minDiv8" id="right_down"></div> </div> </div> <div id="preview"> <canvas id="canvas"></canvas> </div> </body> </html>
css部分：
body{
background: #333;
}
#box{
position:absolute;
top: 1rem;
left: 2rem;
height: 3.5rem;
width: 5rem;
}
#img1{
position: absolute;
opacity: 0.6;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#img2{
position: absolute;
top: 0;
left: 0;
clip: rect(0,0.2rem,0.2rem,0);
width: 100%;
height: 100%;
}
#main{
position: absolute;
border: 1px dashed #fff;
height: 2rem;
width: 2rem;
cursor: move;
}
.div{
position: absolute;
width: 0.08rem;
height: 0.08rem;
background: #fff;
}
.minDiv{
left: 50%;
margin-left: -0.04rem;
top: -0.04rem;
cursor: n-resize;
}
.minDiv2{
top: -0.04rem;
left: -0.04rem;
cursor: nw-resize;
}
.minDiv3{
top: -0.04rem;
right: -0.04rem;
cursor: ne-resize;
}
.minDiv4{
top: 50%;
left: -0.04rem;
margin-top: -0.04rem;
cursor: w-resize;
}
.minDiv5{
top: 50%;
margin-top: -0.04rem;
right: -0.04rem;
cursor: e-resize;
}
.minDiv6{
bottom: -0.04rem;
left: -0.04rem;
cursor: ne-resize;
}
.minDiv7{
bottom: 0;
left: 50%;
margin-bottom: -0.04rem;
margin-left: -0.04rem;
cursor: s-resize;
}
.minDiv8{
bottom: 0;
margin-bottom: -0.04rem;
right: -0.04rem;
cursor: se-resize;
}
#preview{
position: absolute;
width: 2rem;
height: 2rem;
top: 1rem;
left: 10rem;
overflow: hidden;
}
#img3{
position: absolute;
}
#canvas{
height: 100%;
width: 100%;
background: #fff;
border: 1px solid #aaa;
}
js部分：
window.onload = function(){
document.onselectstart = new Function('event.returnValue=false;');//禁止图片被选中
var box = document.getElementById('box');
var rightDiv = document.getElementById('right');//右边触点
var mainDiv = document.getElementById('main');
var up = document.getElementById('up');
var left = document.getElementById('left');
var down = document.getElementById('down');
var left_up = document.getElementById('left_up');
var right_up = document.getElementById('right_up');
var left_down = document.getElementById('left_down');
var right_down = document.getElementById('right_down');
var ifKeyDown = false;//鼠标按下状态
var contact = "";//表示被按下的触点
setChoice();
//鼠标按下事件
rightDiv.onmousedown = function(e){
e.stopPropagation();//阻止事件冒泡
ifKeyDown = true;
contact = "rightDiv";
}
up.onmousedown = function(e){
e.stopPropagation();
ifKeyDown = true;
contact = "up";
}
left.onmousedown = function(e){
e.stopPropagation();
ifKeyDown = true;
contact = "left"
}
down.onmousedown = function(e){
e.stopPropagation();
ifKeyDown = true;
contact = "down";
}
left_up.onmousedown = function(e){
e.stopPropagation();
ifKeyDown = true;
contact = "left_up";
}
left_down.onmousedown = function(e){
e.stopPropagation();
ifKeyDown = true;
contact = "left_down";
}
right_up.onmousedown = function(e){
e.stopPropagation();
ifKeyDown = true;
contact = "right_up";
}
right_down.onmousedown = function(e){
e.stopPropagation();
ifKeyDown = true;
contact = "right_down";
}
mainDiv.onmousedown = function(e){
e.stopPropagation();
ifKeyDown = true;
contact = "box";
}
//鼠标松开事件
window.onmouseup = function(){
ifKeyDown = false;
contact = "";
}
//鼠标移动事件
window.onmousemove = function(e){
if(ifKeyDown){
switch (contact){
case "rightDiv":rightMove(e);break;
case "up":upMove(e);break;
case "left":leftMove(e);break;
case "down":downMove(e);break;
case "left_up":leftMove(e);upMove(e);break;
case "left_down":leftMove(e);downMove(e);break;
case "right_up":rightMove(e);upMove(e);break;
case "right_down":rightMove(e);downMove(e);break;
// case "box":tuo(e);break;
}
}
setChoice();
}
//选取框按下拖拽事件
var disX;
var disY;
mainDiv.onmousedown = function(e){
ifKeyDown = true;
var oEvent = e || event;
disX = oEvent.clientX - mainDiv.offsetLeft;
disY = oEvent.clientY - mainDiv.offsetTop;
document.onmousemove = function(e){
var oEvent = e || event;
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
if (l < 0) {
l = 0;
} else if(l > box.offsetWidth - mainDiv.offsetWidth){
l = box.offsetWidth - mainDiv.offsetWidth;
}
if (t < 0) {
t = 0;
} else if(t > box.offsetHeight - mainDiv.offsetHeight){
t = box.offsetHeight - mainDiv.offsetHeight;
}
mainDiv.style.top = t +"px";
mainDiv.style.left = l +"px";
setPreview();
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup =null;
}
return false;
}
//设置选取区域高亮可见
function setChoice(){
var top = mainDiv.offsetTop;
var right = mainDiv.offsetLeft + mainDiv.offsetWidth;
var bottom = mainDiv.offsetTop + mainDiv.offsetHeight;
var left = mainDiv.offsetLeft;
var img2 = document.getElementById('img2');
img2.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
setPreview();
}
//获取图片的缩放比例
function bili(img,box){
var w = Math.round(img.width / box.offsetWidth * 100) / 100;
var h = Math.round(img.height / box.offsetHeight * 100) /100;
return {"w":w,"h":h};
}
//预览函数
function setPreview(){
var l = mainDiv.offsetLeft;//选取框左上角的坐标
var t = mainDiv.offsetTop;
var tt = right_down.offsetTop - right_up.offsetTop;//选取框的高度
var ll = right_down.offsetLeft - left_down.offsetLeft;//宽度
console.log(l+" "+ t)
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
var box = document.getElementById('box');
var img = new Image();
img.src = "images/1.jpg";
img.onload = function(){
context.drawImage(img,l*bili(img,box).w,t*bili(img,box).h,ll*bili(img,box).w,tt*bili(img,box).h,0,0,canvas.width,canvas.height);
}
}
//右边移动
function rightMove(e){
var x = e.clientX;//鼠标X坐标s
if (x > getPosition(box).left + box.offsetWidth) {
x = getPosition(box).left + box.offsetWidth;
}
var widthBefore = mainDiv.offsetWidth-2;//选取框变换前的宽度
var addWidth = "";//鼠标移动后选取框增加的宽度
addWidth = x - getPosition(mainDiv).left - widthBefore;//鼠标移动后增加的宽度
mainDiv.style.width = addWidth + widthBefore +"px";//选取框变换后的宽度
}
//上边移动
function upMove(e){
var y = e.clientY;//鼠标纵坐标
if(y < getPosition(box).top){
y = getPosition(box).top;
}
var heightBefore = mainDiv.offsetHeight - 2;//原来的高度
var mainY = getPosition(mainDiv).top;//选取框相对于屏幕上边的距离
var addHeight = mainY - y;//增加的高度
mainDiv.style.height = heightBefore + addHeight +"px";
mainDiv.style.top = mainDiv.offsetTop - addHeight +"px";
}
//下边移动
function downMove(e){
var y = e.clientY;//鼠标纵坐标
if(y > getPosition(box).top + box.offsetHeight){
y = getPosition(box).top + box.offsetHeight
}
var heightBefore = mainDiv.offsetHeight - 2;//选取框变换之前的高度
var mainY = getPosition(mainDiv).top;//选取框相对于父级的高度
var addHeight = y - heightBefore - mainY;//增加的高度
mainDiv.style.height = addHeight +heightBefore + "px";
}
//左边移动
function leftMove(e){
var x = e.clientX;//鼠标的坐标
if(x < getPosition(box).left){
x = getPosition(box).left;
}
var widthBefore = mainDiv.offsetWidth - 2;//选框变化前的宽度
var mainX = getPosition(mainDiv).left;
var addWidth = mainX - x ;//增加的宽度
mainDiv.style.width = widthBefore + addWidth +"px";//选款变换后的宽度
mainDiv.style.left = mainDiv.offsetLeft - addWidth +"px";
}
}
//获取元素相对于屏幕左边的距离
function getPosition(obj){
var left = obj.offsetLeft;
var top = obj.offsetTop;
var parent = obj.offsetParent;
while(parent != null){
left += parent.offsetLeft;
top += parent.offsetTop;
parent = parent.offsetParent;
}
return {"left":left,"top":top};
}