JS實(shí)現(xiàn)圖片剪裁并預(yù)覽效果
今天又瘋狂學(xué)習(xí)了web前端的圖片剪裁效果,可以有個(gè)區(qū)域來(lái)框住圖片的某一部分,并可以預(yù)覽框住的部分
效果圖如下:
看著是不是很炫呢
簡(jiǎn)單介紹下實(shí)現(xiàn)方法吧
1.布局就是左右兩塊div,右邊的好說(shuō),主要是左邊的,左邊的用絕對(duì)布局的方式分了3層,最下面一層是一個(gè)半透明的圖片,中間一層是原圖,但被剪切成只有一塊,也只顯示這一塊,可以用clip:rect方法實(shí)現(xiàn),然后最上面一層就是自己寫(xiě)的一個(gè)邊框,在邊框上加了8個(gè)點(diǎn),分別給這8個(gè)點(diǎn)定義位置。
2.然后JS代碼用了鼠標(biāo)的點(diǎn)擊事件來(lái)實(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ū)域右邊離圖片左邊的距離,即長(zhǎng)+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增加絕對(duì)定位或者相對(duì)定位 但由于父元素是絕對(duì)定位,所以這里是絕對(duì)定位*/ 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的父級(jí)元素左邊50%的距離 除此之外 top right bottom也是距最近的一個(gè)position屬性為absolute或者relative的父級(jí)元素 的距離 */ 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īng)顟B(tài) rightDiv.onmousedown = function(e) { /*拖動(dòng)效果引入的jquery 和 jquery-ui也會(huì)去觸發(fā)鼠標(biāo)點(diǎn)擊事件, 所以為了防止自己定義的點(diǎn)擊事件和引入的點(diǎn)擊事件沖突,傳入e并加入以下 這條語(yǔ)句,防止冒泡。冒泡是指鼠標(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)松開(kāi)狀態(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;//選取框相對(duì)于屏幕上邊的距離 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"; } } // 獲取元素相對(duì)于屏幕左邊的距離,利用offsetLeft // node為傳入的元素 function getPosition(node) { /*獲取元素相對(duì)于父元素的左邊距*/ var left = node.offsetLeft; /*獲取元素相對(duì)于父元素的上邊距*/ var top = node.offsetTop; /*獲取元素的父元素*/ var parent = node.offsetParent; /*判斷是否存在父元素,存在則一直加上左邊距,一直算出元素相對(duì)于瀏覽器 左邊界的距離*/ while(parent != null) { /*循環(huán)累加子元素相對(duì)于父元素的左邊距*/ left += parent.offsetLeft; /*循環(huán)累加子元素相對(duì)于父元素的上邊距*/ top += parent.offsetTop; /*循環(huán)獲取父元素的父元素,直至沒(méi)有父元素為止*/ parent = parent.offsetParent; } return {"left":left,"top":top}; } //設(shè)置選取區(qū)域高亮可見(jiàn) 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"; } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js實(shí)現(xiàn)點(diǎn)擊后將文字或圖片復(fù)制到剪貼板的方法
- php+js實(shí)現(xiàn)圖片的上傳、裁剪、預(yù)覽、提交示例
- js+jquery實(shí)現(xiàn)圖片裁剪功能
- jquery imgareaselect 使用利用js與程序結(jié)合實(shí)現(xiàn)圖片剪切
- 使用JavaScript+canvas實(shí)現(xiàn)圖片裁剪
- 基于原生JS實(shí)現(xiàn)圖片裁剪
- javascript 圖片裁剪技巧解讀
- 基于JavaScript實(shí)現(xiàn)圖片剪切效果
- 利用Javascript裁剪圖片并存儲(chǔ)的簡(jiǎn)單實(shí)現(xiàn)
相關(guān)文章
JavaScript中textRange對(duì)象使用方法小結(jié)
這篇文章主要介紹了JavaScript中textRange對(duì)象使用方法小結(jié),需要的朋友可以參考下2015-03-03詳解js產(chǎn)生對(duì)象的3種基本方式(工廠模式,構(gòu)造函數(shù)模式,原型模式)
本篇文章主要介紹了js產(chǎn)生對(duì)象的3種基本方式(工廠模式,構(gòu)造函數(shù)模式,原型模式) ,具有一定的參考價(jià)值,有興趣的可以了解一下2017-01-01JS實(shí)現(xiàn)的base64加密、md5加密及sha1加密詳解
這篇文章主要介紹了JS實(shí)現(xiàn)的base64加密、md5加密及sha1加密的方法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript各種常見(jiàn)加密方法與實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-04-04微信小程序request請(qǐng)求封裝,驗(yàn)簽代碼實(shí)例
這篇文章主要介紹了微信小程序request請(qǐng)求封裝,驗(yàn)簽代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12JS實(shí)現(xiàn)仿微博可關(guān)閉彈出層效果
這篇文章主要介紹了JS實(shí)現(xiàn)仿微博可關(guān)閉彈出層效果,涉及JavaScript彈出窗口的設(shè)置及頁(yè)面元素動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09bootstrap-table后端分頁(yè)功能完整實(shí)例
這篇文章主要介紹了bootstrap-table后端分頁(yè)功能,結(jié)合完整實(shí)例形式分析了bootstrap-table后端請(qǐng)求、數(shù)據(jù)分頁(yè)功能具體步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-06-06JavaScript實(shí)現(xiàn)的簡(jiǎn)單冪函數(shù)實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的簡(jiǎn)單冪函數(shù),實(shí)例分析了javascript實(shí)現(xiàn)冪運(yùn)算的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04three.js利用gpu選取物體并計(jì)算交點(diǎn)位置的方法示例
這篇文章主要給大家介紹了關(guān)于three.js利用gpu選取物體并計(jì)算交點(diǎn)位置的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11五步輕松實(shí)現(xiàn)JavaScript HTML時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了五步輕松實(shí)現(xiàn)JavaScript HTML時(shí)鐘效果的代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11