JS實(shí)現(xiàn)圖片剪裁并預(yù)覽效果

更新時(shí)間：2016年08月12日 08:50:28 作者：yesz12358

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)圖片剪裁并預(yù)覽效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

今天又瘋狂學(xué)習(xí)了web前端的圖片剪裁效果，可以有個(gè)區(qū)域來框住圖片的某一部分，并可以預(yù)覽框住的部分

效果圖如下：

看著是不是很炫呢

簡單介紹下實(shí)現(xiàn)方法吧

1.布局就是左右兩塊div,右邊的好說，主要是左邊的，左邊的用絕對布局的方式分了3層，最下面一層是一個(gè)半透明的圖片，中間一層是原圖，但被剪切成只有一塊，也只顯示這一塊，可以用clip:rect方法實(shí)現(xiàn)，然后最上面一層就是自己寫的一個(gè)邊框，在邊框上加了8個(gè)點(diǎn)，分別給這8個(gè)點(diǎn)定義位置。

2.然后JS代碼用了鼠標(biāo)的點(diǎn)擊事件來實(shí)現(xiàn)。

下面貼上自己的代碼：

index.html (這里要引用兩個(gè)js文件，分別是jquery和jquery-ui，其中jquery可以引用網(wǎng)上的，jquery-ui我是自己下在本地引用的，大家可以自己去官網(wǎng)下載，不引用則不能實(shí)現(xiàn)拖動(dòng)剪切框)

<!DOCTYPE HTML>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>圖片剪切</title>
<script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.12.0/jquery-ui.min.js"></script>
<link href="img.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="img.js"></script>
</head>
<body>
 <div id="box">
 <img src="images/1.jpg" id="img1">
 <img src="images/1.jpg" id="img2">
 <div id="main">
 <div id="left-up" class="minDiv left-up"></div>
 <div id="up" class="minDiv up"></div>
 <div id="right-up" class="minDiv right-up"></div>
 <div id="right" class="minDiv right"></div>
 <div id="right-down" class="minDiv right-down"></div>
 <div id="down" class="minDiv down"></div>
 <div id="left-down" class="minDiv left-down"></div>
 <div id="left" class="minDiv left"></div>
 </div>
 </div>
 <div id="preview">
 <img src="images/1.jpg" id="img3">
 </div>

</body>
</html>
 img.css
 

body {
 background-color: #333;
}

#box {
 position: absolute;
 top: 200px;
 left: 100px;
 width: 600px;
 height: 319px;
}

#img1 {
 /*不透明度*/
 opacity: 0.3;
 position:absolute;
 top: 0;
 left: 0;

}

#img2 {
 position: absolute;
 top: 0;
 left: 0;

 /*用于剪切圖像的函數(shù)
 clip: rect(top,right,bottom,left);
 top表示剪切區(qū)域頂部離圖片頂部的距離
 right表示剪切區(qū)域右邊離圖片左邊的距離，即長+left
 bottom表示剪切區(qū)域底部離圖片頂部的距離，即寬+top
 left表示剪切區(qū)域左邊離圖片左邊的距離
 */
 clip: rect(0, 200px, 200px, 0);
}

#main {
 position: absolute;
 border: 1px solid #fff;
 width:200px;
 height: 200px;
}

#preview {
 position: absolute;
 width: 600px;
 height: 319px;
 top:200px;
 left: 720px;
}
#preview img{
 /*要讓函數(shù)setPreview里的clip函數(shù)達(dá)到作用，要給img增加絕對定位或者相對定位
 但由于父元素是絕對定位，所以這里是絕對定位*/
 position: absolute;
}

.minDiv {
 position: absolute;
 width: 8px;
 height: 8px;
 background-color: #fff;
}

.left-up {
 top:-4px;
 left: -4px;

 /*鼠標(biāo)變化 n-北 w-西 s-南 e-東*/
 cursor: nw-resize;
}

.up {
 /*距最近的一個(gè)position屬性為absolute或者relative的父級元素左邊50%的距離
 除此之外 top right bottom也是距最近的一個(gè)position屬性為absolute或者relative的父級元素
 的距離
 */
 left: 50%;
 /*距離左邊-4px即向左邊移動(dòng)4px*/
 margin-left: -4px;
 top:-4px;
 cursor: n-resize;
}

.right-up {
 right: -4px;
 top: -4px;
 cursor: ne-resize;
}

.right {
 top: 50%;
 margin-top:-4px;
 right: -4px;
 cursor: e-resize;
}

.right-down {
 bottom: -4px;
 right: -4px;
 cursor: se-resize;
}

.down {
 left: 50%;
 margin-left: -4px;
 bottom: -4px;
 cursor: s-resize;
}

.left-down {
 left: -4px;
 bottom: -4px;
 cursor: sw-resize;
}

.left {
 bottom: 50%;
 margin-bottom: -4px;
 left: -4px;
 cursor: w-resize;
}
 img.js
 

// 在元素加載完之后執(zhí)行，確保元素可以成功獲取
window.onload =function(){

 document.onselectstart = new Function('event.returnValue=false;');
 $("#main").draggable({containment:'parent', drag:setChoice});
 var img = document.getElementById("img2");

 var rightDiv = document.getElementById("right");
 var upDiv = document.getElementById("up");
 var leftDiv = document.getElementById("left");
 var downDiv = document.getElementById("down");
 var leftupDiv = document.getElementById("left-up");
 var rightupDiv = document.getElementById("right-up");
 var rightdownDiv = document.getElementById("right-down");
 var leftdownDiv = document.getElementById("left-down");

 var mainDiv = document.getElementById("main");
 var ifKeyDown = false; 

 var contact = "";// 表示被按下的觸點(diǎn)

 //鼠標(biāo)按下狀態(tài)
 rightDiv.onmousedown = function(e) {
 /*拖動(dòng)效果引入的jquery 和 jquery-ui也會(huì)去觸發(fā)鼠標(biāo)點(diǎn)擊事件，
 所以為了防止自己定義的點(diǎn)擊事件和引入的點(diǎn)擊事件沖突，傳入e并加入以下
 這條語句,防止冒泡。冒泡是指鼠標(biāo)點(diǎn)擊里面的元素時(shí)也會(huì)觸發(fā)父元素的一些事件*/
 e.stopPropagation();
 ifKeyDown = true;
 contact = "right";
 }
 upDiv.onmousedown = function(e) {
 e.stopPropagation();
 ifKeyDown = true;
 contact = "up";
 }
 leftDiv.onmousedown = function(e) {
 e.stopPropagation();
 ifKeyDown = true;
 contact = "left";
 }
 downDiv.onmousedown = function(e) {
 e.stopPropagation();
 ifKeyDown = true;
 contact = "down";
 }
 leftupDiv.onmousedown = function(e) {
 e.stopPropagation();
 ifKeyDown = true;
 contact = "left-up";
 }
 rightupDiv.onmousedown = function(e) {
 e.stopPropagation();
 ifKeyDown = true;
 contact = "right-up";
 }
 rightdownDiv.onmousedown = function(e) {
 e.stopPropagation();
 ifKeyDown = true;
 contact = "right-down";
 }
 leftdownDiv.onmousedown = function(e) {
 e.stopPropagation();
 ifKeyDown = true;
 contact = "left-down";
 }

 //鼠標(biāo)松開狀態(tài)
 window.onmouseup = function() {
 ifKeyDown = false;
 }

 //鼠標(biāo)移動(dòng)事件
 window.onmousemove = function(e) {
 if(ifKeyDown == true){

 switch(contact){
 case "right": 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 "right-up": rightMove(e); upMove(e); break;
 case "right-down": rightMove(e); downMove(e); break;
 case "left-down": leftMove(e); downMove(e); break;
 }

 }
 setChoice();
 setPreview();
 
 }
 //右邊移動(dòng)
 function rightMove(e) {
 var x = e.clientX; //鼠標(biāo)x坐標(biāo)
 var addWidth = ""; //鼠標(biāo)移動(dòng)后選取框增加的寬度
 var widthBefore = mainDiv.offsetWidth - 2; //選取框變化前的寬度，減2是為了減去邊框border的寬，左右兩邊各為1px，所以是2
 addWidth = x - getPosition(mainDiv).left //鼠標(biāo)移動(dòng)后增加的寬度
 if(widthBefore <= img.width){
 mainDiv.style.width = addWidth + "px"; //選取框變化后的寬度
 } else {
 mainDiv.style.width = img.width + "px";
 }
 }

 //上邊移動(dòng)
 function upMove(e) {
 var topBefore = mainDiv.offsetTop;
 var y = e.clientY;//鼠標(biāo)縱坐標(biāo)
 var addHeight = 0;
 var mainY = getPosition(mainDiv).top;//選取框相對于屏幕上邊的距離
 addHeight = y - mainY; //增加的高度
 var heightBefore = mainDiv.offsetHeight - 2;
 var bottom = topBefore + heightBefore;

 var heightAfter = heightBefore - addHeight;
 var topAfter = mainDiv.offsetTop + addHeight;

 if(topAfter < bottom && topAfter > -2){
 mainDiv.style.height = heightAfter + "px";
 mainDiv.style.top = topAfter + "px";
 }

 }

 //左邊移動(dòng)
 function leftMove(e) {
 // 左邊框變化前距離父元素左邊的距離
 var leftBefore = mainDiv.offsetLeft;
 // 鼠標(biāo)按下停止后鼠標(biāo)距離瀏覽器左邊界的距離
 var x = e.clientX;
 // 定義增加的寬度
 var addWidth = 0;
 // 變化之前剪輯框的寬度
 var widthBefore = mainDiv.offsetWidth - 2;
 // 變化之前左邊框距離瀏覽器左邊界的距離
 var mainDivLeft = getPosition(mainDiv).left;
 // 右邊框距離父元素的左邊的距離
 var right = leftBefore + widthBefore;
 // 增加的寬度
 addWidth = x - mainDivLeft;
 // 變化之后剪輯框的寬度
 var widthAfter = widthBefore - addWidth;
 // 變化之后剪輯框離左邊的距離
 var leftAfter = mainDiv.offsetLeft + addWidth;
 // 防止左邊框移到右邊框以外區(qū)域
 if(leftAfter < right && leftAfter > -2) {
 // 定義變化后的寬度
 mainDiv.style.width = widthAfter + "px";
 // 定義變化后距離左邊父元素的距離
 mainDiv.style.left = leftAfter + "px";
 }
 
 }

 //下邊移動(dòng)
 function downMove(e) {
 var y = e.clientY;
 var addHeight = 0;
 var heightBefore = mainDiv.offsetHeight - 2;
 addHeight = y - getPosition(mainDiv).top;
 if(heightBefore <= img.height) {
 mainDiv.style.height = addHeight + "px";
 } else {
 mainDiv.style.height = img.height + "px";
 }
 
 }


 // 獲取元素相對于屏幕左邊的距離，利用offsetLeft
 // node為傳入的元素
 function getPosition(node) {
 /*獲取元素相對于父元素的左邊距*/
 var left = node.offsetLeft;
 /*獲取元素相對于父元素的上邊距*/
 var top = node.offsetTop;
 /*獲取元素的父元素*/
 var parent = node.offsetParent;
 /*判斷是否存在父元素,存在則一直加上左邊距,一直算出元素相對于瀏覽器
 左邊界的距離*/
 while(parent != null) {
 /*循環(huán)累加子元素相對于父元素的左邊距*/
 left += parent.offsetLeft;
 /*循環(huán)累加子元素相對于父元素的上邊距*/
 top += parent.offsetTop;
 /*循環(huán)獲取父元素的父元素，直至沒有父元素為止*/
 parent = parent.offsetParent;
 }
 return {"left":left,"top":top};
 }


 //設(shè)置選取區(qū)域高亮可見
 function setChoice() {
 var top = mainDiv.offsetTop;
 var right = mainDiv.offsetLeft + mainDiv.offsetWidth;
 var bottom = mainDiv.offsetTop + mainDiv.offsetHeight;
 var left = mainDiv.offsetLeft;
 img.style.clip = "rect("+ top+"px,"+ right+"px,"+ bottom +"px,"+ left+"px"+")"
 }

 //預(yù)覽函數(shù)
 function setPreview() {
 var top = mainDiv.offsetTop;
 var right = mainDiv.offsetLeft + mainDiv.offsetWidth;
 var bottom = mainDiv.offsetTop + mainDiv.offsetHeight;
 var left = mainDiv.offsetLeft;
 var img3 = document.getElementById("img3");
 img3.style.clip = "rect("+ top+"px,"+ right+"px,"+ bottom +"px,"+ left+"px"+")"
 
 img3.style.top = -(top) + "px";
 img3.style.left = -(left) + "px";
 }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: