用JavaScript实现图片剪切效果
生活随笔
收集整理的這篇文章主要介紹了
用JavaScript实现图片剪切效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
學(xué)會如何獲取鼠標的坐標位置以及監(jiān)聽鼠標的按下、拖動、松開等動作事件，從而實現(xiàn)拖動鼠標來改變圖片大小。
還可以學(xué)習(xí)css中的clip屬性。
一、CSS實現(xiàn)圖片不透明及裁剪效果。
圖片剪切三層結(jié)構(gòu) 1、第一層opacity,給圖層設(shè)置透明度 2、第二層clip，clip屬性：對圖片進行裁剪，實現(xiàn)圖像的一部分顯示，其他部分進行隱藏 3、第三層選取框absolute（與第二層重疊的），包括八個觸點的效果
html代碼：
1 <div id="box"> 2 <img src="img/1.jpg" id="img1" /> 3 <img src="img/1.jpg" id="img2" /> 4 <div id="main"> 5 <div class="Divmin up-left"></div> 6 <div class="Divmin up"></div> 7 <div class="Divmin up-right"></div> 8 <div class="Divmin right"></div> 9 <div class="Divmin right-down"></div> 10 <div class="Divmin down"></div> 11 <div class="Divmin left-down"></div> 12 <div class="Divmin left"></div> 13 </div> 14 </div>
css代碼：
1 body{
2 background: #333;
3 }
4 #box{
5 width: 500px;
6 height: 380px;
7 position: absolute;
8 top: 100px;
9 left: 200px;
10 }
11 #img1,#img2{
12 position: absolute;
13 top: 0;
14 left: 0;
15 }
16 #img1{
17 opacity: 0.3;
18 }
19 #img2{
20 clip: rect(0,200px,200px,0);
21 }
22 #main{
23 position: absolute;/*第三層需用絕對定位浮在上面*/
24 width: 200px;
25 height: 200px;
26 border: 1px solid #fff;
27 }
28 .Divmin{
29 position: absolute;
30 width: 8px;
31 height: 8px;
32 background: #fff;
33 }
34 .up-left{margin-top: -4px;margin-left: -4px;cursor: nw-resize;}
35 .up{
36 left: 50%;/*父元素盒子main寬度的一半，注意要有絕對定位*/
37 margin-left:-4px;
38 top: -4px;
39 cursor: n-resize;
40 }
41 .up-right{top: -4px;right: -4px;cursor: ne-resize;}
42 .right{top: 50%;margin-top: -4px;right: -4px;cursor: e-resize;}
43 .right-down{right: -4px;bottom: -4px;cursor: se-resize;}
44 .down{bottom: -4px;left: 50%;margin-left: -4px;cursor: s-resize;}
45 .left-down{left: -4px;bottom: -4px;cursor: sw-resize;}
46 .left{left: -4px;top: 50%;margin-top: -4px;cursor: w-resize;}
二、javascript獲取選擇框偏移量
選擇框鼠標拖動位置詳解：
offsetLeft:元素相對于其父元素左邊界的距離； clientX：鼠標位置的橫坐標； clientWidth：元素的寬度；
offsetXY:是該事件發(fā)生的盒子模型里的坐標，與滾動條無關(guān)。
clientXY：是整個瀏覽器可用部分里的坐標，與滾動條無關(guān)，即需要拖動滾動條才能看到的區(qū)域不考慮。
pageXY：是整個網(wǎng)頁里的坐標，與滾動條有關(guān)。
構(gòu)造一個getPosition()函數(shù)，用于獲取元素相對于屏幕左邊及上邊的距離
js代碼如下：
1 //獲取元素相對于屏幕左邊及上邊的距離，利用offsetLeft
2 function getPosition(el){
3 var left = el.offsetLeft;
4 var top = el.offsetTop;
5 var parent = el.offsetParent;
6 while(parent != null){
7 left += parent.offsetLeft;
8 top += parent.offsetTop;
9 parent = parent.offsetParent;
10 }
11 return {"left":left,"top":top};
12 }
三、javascript實現(xiàn)控制觸點
監(jiān)聽鼠標的按下、拖動、松開的事件控制選取框的大小。
注意區(qū)別：
Element.clientWidth 屬性表示元素的內(nèi)部寬度，以像素計。該屬性包括內(nèi)邊距，但不包括垂直滾動條（如果有的話）、邊框和外邊距。
即clientWidth不包括邊框，offsetWidth包括邊框
1）點擊右面的觸點
js代碼：
1 var mainDiv = $('main');
2 var rightDiv = $('right');
3 var isDraging = false;
4 var contact = "";//表示被按下的觸點
5 //鼠標按下時
6 rightDiv.onmousedown = function(){
7 isDraging = true;
8 contact = "right";
9 }
10 //鼠標松開時
11 window.onmouseup = function(){
12 isDraging = false;
13 }
14 //鼠標移動時
15 window.onmousemove = function(e){
16 if(isDraging == true){
17 if(contact == "right"){
18 var e = e||window.event;
19 var x = e.clientX;//鼠標位置的橫坐標
20 var widthBefore = mainDiv.offsetWidth - 2;//選取框變化前的寬度
21 //var widthBefore = mainDiv.clientWidth;
22 var addWidth = x - getPosition(mainDiv).left - widthBefore;//鼠標移動后選取框增加的寬度
23 mainDiv.style.width = widthBefore + addWidth + 'px';//選取框變化后的寬度
24 }
25 }
26 }
27
28 //獲取id的函數(shù)
29 function $(id){
30 return document.getElementById(id);
31 }
2）點擊上面觸點
點擊上面中間的觸點移動時，選取框的高度和左上角的位置都需要變化。
增加的高度=選取框相對于屏幕上面的距離 - 鼠標位置的縱坐標
選取框左上角的top值要減去增加的高度，因為鼠標向上移動時高度增加，top值減小，下移時高度減小，top增大。
變化示意圖：
js代碼：
1 else if(contact == "up"){
2 var y = e.clientY;//鼠標位置的縱坐標
3 var heightBefore = mainDiv.offsetHeight - 2;//選取框變化前的高度
4 var addHeight = getPosition(mainDiv).top - y;//增加的高度
5 mainDiv.style.height = heightBefore + addHeight + 'px';//選取框變化后的寬度
6 mainDiv.style.top = mainDiv.offsetTop - addHeight + 'px';//相當于變化后左上角的縱坐標，鼠標向上移縱坐標減小，下移增大
7 }
3）點擊左邊觸點
原理同點擊上面觸點，寬度和左邊的位置都會變化
變化示意圖：
js代碼：
1 else if(contact == "left"){
2 var widthBefore = mainDiv.offsetWidth - 2;
3 var addWidth = getPosition(mainDiv).left - e.clientX;//增加的寬度等于距離屏幕左邊的距離減去鼠標位置橫坐標
4 mainDiv.style.width = widthBefore + addWidth + 'px';
5 mainDiv.style.left = mainDiv.offsetLeft - addWidth + 'px';//左邊的距離（相當于左邊位置橫坐標）等于選取框距父級元素的距離減去增加的寬度
6 }
4）點擊下面觸點
增加的寬度 = 鼠標位置縱坐標 - 距屏幕上邊的距離 - 原先的寬度
左上角的位置不需改變
js代碼：
1 else if(contact = "down"){
2 var heightBefore = mainDiv.offsetHeight - 2;
3 var addHeight = e.clientY - getPosition(mainDiv).top - mainDiv.offsetHeight;
4 mainDiv.style.height = heightBefore + addHeight + 'px';
5 }
5）點四個角時的變化是高度和寬度變化的疊加，所以最好將上面四個變化的過程封裝成函數(shù)，便于維護和代碼復(fù)用。
如果用if else 需要判斷8次，所以改為switch語句來簡化代碼
修改后的js代碼如下：
1 window.onmousemove = function(e){
2 var e = e||window.event;
3 if(isDraging == true){
4 switch (contact){
5 case "up" : upMove(e);break;
6 case "right" : rightMove(e);break;
7 case "down" : downMove(e);break;
8 case "left" : leftMove(e);break;
9 case "up-right" : upMove(e);rightMove(e);break;
10 case "down-right" : downMove(e);rightMove(e);break;
11 case "down-left" : downMove(e);leftMove(e);break;
12 case "up-left" : upMove(e);leftMove(e);break;
13 }
14 }
15 }
16
17 //獲取id的函數(shù)
18 function $(id){
19 return document.getElementById(id);
20 }
21 //獲取元素相對于屏幕左邊及上邊的距離，利用offsetLeft
22 function getPosition(el){
23 var left = el.offsetLeft;
24 var top = el.offsetTop;
25 var parent = el.offsetParent;
26 while(parent != null){
27 left += parent.offsetLeft;
28 top += parent.offsetTop;
29 parent = parent.offsetParent;
30 }
31 return {"left":left,"top":top};
32 }
33 //up移動
34 function upMove(e){
35 var y = e.clientY;//鼠標位置的縱坐標
36 var heightBefore = mainDiv.offsetHeight - 2;//選取框變化前的高度
37 var addHeight = getPosition(mainDiv).top - y;//增加的高度
38 mainDiv.style.height = heightBefore + addHeight + 'px';//選取框變化后的寬度
39 mainDiv.style.top = mainDiv.offsetTop - addHeight + 'px';//相當于變化后左上角的縱坐標，鼠標向上移縱坐標減小，下移增大
40 }
41 //right移動
42 function rightMove(e){
43 var x = e.clientX;//鼠標位置的橫坐標
44 var widthBefore = mainDiv.offsetWidth - 2;//選取框變化前的寬度
45 //var widthBefore = mainDiv.clientWidth;
46 var addWidth = x - getPosition(mainDiv).left - widthBefore;//鼠標移動后選取框增加的寬度
47 mainDiv.style.width = widthBefore + addWidth + 'px';//選取框變化后的寬度
48 }
49 //down移動
50 function downMove(e){
51 var heightBefore = mainDiv.offsetHeight - 2;
52 var addHeight = e.clientY - getPosition(mainDiv).top - mainDiv.offsetHeight;
53 mainDiv.style.height = heightBefore + addHeight + 'px';
54 }
55 //left移動
56 function leftMove(e){
57 var widthBefore = mainDiv.offsetWidth - 2;
58 var addWidth = getPosition(mainDiv).left - e.clientX;//增加的寬度等于距離屏幕左邊的距離減去鼠標位置橫坐標
59 mainDiv.style.width = widthBefore + addWidth + 'px';
60 mainDiv.style.left = mainDiv.offsetLeft - addWidth + 'px';//左邊的距離（相當于左邊位置橫坐標）等于選取框距父級元素的距離減去增加的寬度
61 }
四、實現(xiàn)選取框區(qū)域明亮顯示
1）選取框內(nèi)的第二層圖片需重新設(shè)置其clip屬性
四個方面圖示：
js代碼：
1 //設(shè)置選取框圖片區(qū)域明亮顯示
2 function setChoice(){
3 var top = mainDiv.offsetTop;
4 var right = mainDiv.offsetLeft + mainDiv.offsetWidth;
5 var bottom = mainDiv.offsetTop + mainDiv.offsetHeight;
6 var left = mainDiv.offsetLeft;
7 img2.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
8 }
2）鼠標移動時會導(dǎo)致圖片被選中，可在js代碼中添加一行代碼使其禁止圖片被選中
//禁止圖片被選中
document.onselectstart = new Function('event.returnValue = false;');
也可以在css樣式里添加 *{user-select:none}
意思是文本不可選中，對圖片跟div有一樣的效果。
五、實現(xiàn)選取框位置可拖動
首先要阻止事件冒泡
js代碼如下：
//鼠標按下觸點時
rightDiv.onmousedown = function(e){
e.stopPropagation();
isDraging = true;
contact = "right";
}
鼠標拖拽效果的實現(xiàn)可見另一篇隨筆http://www.cnblogs.com/vampire170204/p/6422914.html
六、實現(xiàn)圖片剪切區(qū)域預(yù)覽
新增一個圖片預(yù)覽區(qū)域的div
html代碼：
<div id="preview">
<img src="img/1.jpg" id="img3" />
</div>
css代碼：
#preview{
position: absolute;
width: 500px;
height: 380px;
top: 100px;
left:710px ;
}
#preview #img3{position: absolute;}
注意：要讓clip:rect(top,right,bottom,left) 起作用，必須讓作用元素為相對/絕對定位。
js部分同樣是利用clip屬性，和setChoice()函數(shù)同時被調(diào)用
同時為了讓右邊預(yù)覽區(qū)的左上角位置固定，需要設(shè)置其top和left的值
1 //右邊圖片預(yù)覽函數(shù)
2 function setPreview(){
3 var top = mainDiv.offsetTop;
4 var right = mainDiv.offsetLeft + mainDiv.offsetWidth;
5 var bottom = mainDiv.offsetTop + mainDiv.offsetHeight;
6 var left = mainDiv.offsetLeft;
7 var img3 = $('img3');
8 img3.style.top = -top + 'px';
9 img3.style.left = -left + 'px';
10 img3.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
11 }
總結(jié)
以上是生活随笔為你收集整理的用JavaScript实现图片剪切效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Jmock 原理简单说明
- 下一篇： 魔兽世界60级通灵学院的钥匙任务怎么做