js jquery實作圖片裁切功能_jquery-js教程-PHP中文網

現在我們在使用各大網站的個人中心時，都有個上傳個人頭像的功能。用戶在上傳了個人照片之後，可能不符合網站的要求，於是要求用戶對照片進行裁剪，最終根據用戶裁剪的尺寸生成頭像。這個功能真是太棒了，原來不懂js的時候，感覺很神奇，太神奇了。心想哪天要是自己也能搞清楚這裡面的技術，那該多牛呀~大家是不是也有何我一樣的想法呀~哈哈~~

下面我們就來用javascript來實作這個功能吧。

複製程式碼 程式碼如下: http://www.w3.org/1999/xhtml "> clip *{ padding:0; margin:0;} ul{ list-style-type:none; overflow:hidden; zoom:1; width:1000px; margin:30px auto; } li{ float:left; width:500px;} #container{width:480px; height:480px; margin:0 auto; border:1px solid #999; position:relative;background:url( http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_xx.jpg );} #container .block{height:100px; width:100px; border:1px solid #000000; position:absolute; left:50px; top:50px; background:#fff;filter:alpha(opacity=30);opacity:0.3; cursor:move;} #container .tips{ position:absolute; padding:5px; border:1px solid #ccc;background:#fff;filter:alpha(opacity=60);opacity:0.6; display:none; font-size:12px; color:#333; ;} .tips span{ display:inline-block;zoom:1; width:28px;} .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{ position:absolute;background:#f00;width:6px;height:6px;z-index:5;font-size:0;} .rLeftDown,.rRightUp{cursor:ne-resize;} .rRightDown,.rLeftUp{cursor:nw-resize;} .rRight,.rLeft{cursor:e-resize;} .rUp,.rDown{cursor:n-resize;} .rRightDown{ bottom:-3px; right:-3px;} .rLeftDown{ bottom:-3px; left:-3px;} .rRightUp{ top:-3px; right:-3px;} .rLeftUp{ top:-3px; left:-3px;} .rRight{ right:-3px; top:50%} .rLeft{ left:-3px; top:50%} .rUp{ top:-3px; left:50%} .rDown{ bottom:-3px; left:50%} #imgC{ border:1px solid #CCC; width:0; height:0; margin:0 auto;background:url( http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_xx.jpg );} .code { background: none repeat scroll 0 0 #E3F4F9; border: 1px solid #BAE2F0; font: 12px "Courier New",Courier,monospace; margin: 30px auto; padding: 10px 10px 40px; width:980px; } .code p{ height:24px; line-height:24px;} .code span{ display:inline-block;zoom:1; margin-right:5px; width:85px; font-weight:bold; color:#00F} 使用方法 $("#container").clip({ imgC : $("#imgC"), blockClass : "block", tipsClass : "tips" });

imgC : 表示裁剪图片的容器,也就是右边的图

blockClass : block的样式名 也就是页面上的可以拖动的滑块的样式 因为怕和别的页面上的样式重名 默认是block

tipsClass : tips的样式名 也就是页面上显示left width height top的那个span的样式名 默认是tips

http://common.cnblogs.com/script/jquery.js"> > (function(){ var dBody = document.body, dDoc = document.documentElement, ie = $.browser.msie; ie&&($.browser.version=="6.0") &&document.execCommand("BackgroundImageCache", false, true); var clip = function(options){ this.init.call(this,options); } clip.prototype = { options :{ moveCallBack : function(){}, blockClass : "block", tipsClass : "tips" }, init : function(options){ $.extend(this,this.options,options||{}); if(!this.container || !this.imgC){ return; } this.container = $(this.container); var self = this; this.block = $(' \ \ \ \ \ \ \ \ \ ') .bind("mousedown.r",function(e){self.start(e)}) .appendTo(this.container[0]); this.tips = $(' ').appendTo(this.container[0]); this.setImg(); }, setImg : 函數(){ var block = this.block; var left = block.css("left"), 頂部 = block.css("頂部"), 高度 = block.height(), 寬度 = block.width(); this.imgC.css({ 高度： 高度， 寬度：寬度， 「背景位置」：「-」左「-」上方 }); this.tips.html("left: " parseInt(left) " top: " parseInt(top)" width: " width " 高度: "高度" "); }, 開始：函數（e）{ var $elem = $(e.target), 塊 = this.block, self = 這個， 移動 = false, 容器 = this.container, 動作 = $elem.attr("action"); //這個將會計算基本領域結構的改變瀏覽器的縮放都會讓裡面的數值改變 this.offset = $.extend({height:container.height(),width:container.width()},container.offset()); this.blockOriginal = {height:block.height(),width:block.width(),left:parseInt(block.css("left")),top:parseInt(block.css("top"))}; 如果（行動）{ this.fun = this[動作]; }其他{ this.x = e.clientX - this.offset.left - this.blockOriginal.left ; this.y = e.clientY - this.offset.top - this.blockOriginal.top; 移動=真； } 即 &&this.block[0].setCapture(); this.tips.show(); $(文件) .bind("mousemove.r",function(e){self.move(e,move)}) .bind("mouseup.r",function(){self.end()}); }, 結束：函數（）{ $(文件) .unbind("mousemove.r") .unbind("mouseup.r"); 即 &&this.block[0].releaseCapture(); this.tips.hide(); }, 移動 : 函數(e,isMove){ window.getSelection ？ window.getSelection().removeAllRanges() : document.selection.empty(); var 區塊 = this.block; if(isMove){ var left = Math.max(0,e.clientX - this.offset.left - this.x); left = Math.min(left,this.offset.width - this.blockOriginal.width); var top = Math.max(0,e.clientY - this.offset.top - this.y); top = Math.min(top,this.offset.height - this.blockOriginal.height); block.css({左:左,上:上}); }其他{ var offset = this.fun(e); block.css(偏移); } this.setImg(); this.moveCallBack(); }, 向下 : 函數(e){ var blockOriginal = this.blockOriginal, sTop = Math.max(dBody.scrollTop,dDoc.scrollTop), //出現垂直滾動條時候要計算這個 offset = this.offset; if(e.clientY-offset.top>=blockOriginal.top-sTop){ var height = Math.min(offset.height - blockOriginal.top,e.clientY-offset.top-blockOriginal.top sTop), 上方 = blockOriginal.top; }其他{ var height = Math.min(offset.top blockOriginal.top-e.clientY-sTop,blockOriginal.top), top = Math.max(e.clientY - offset.top sTop,0); } return {高度:高度, 頂部:頂部}; }, 向上： 函數(e){ var blockOriginal = this.blockOriginal, sTop = Math.max(dBody.scrollTop,dDoc.scrollTop), offset = this.offset; if(e.clientY-offset.top-blockOriginal.height var top = Math.max(e.clientY-offset.top sTop,0), maxHeight = blockOriginal.top blockOriginal.height, height = Math.min(maxHeight,blockOriginal.top blockOriginal.height -(e.clientY-offset.top)-sTop); }其他{ var height = Math.min(e.clientY-offset.top-blockOriginal.top-blockOriginal.height sTop,offset.height-blockOriginal.top-blockOriginal.height), 頂部 = blockOriginal.top blockOriginal.height; } return {高度:高度, 頂部:頂部}; }, 左：函數（e）{ var blockOriginal = this.blockOriginal, offset = this.offset; if(e.clientX - offset.left - blockOriginal.width - blockOriginal.left var left = Math.max(e.clientX - offset.left,0), width = Math.min(blockOriginal.left blockOriginal.width,blockOriginal.left blockOriginal.width -(e.clientX-offset.left)); }其他{ var width = Math.min(e.clientX-offset.left-blockOriginal.left-blockOriginal.width,offset.width-blockOriginal.left-blockOriginal.width), 左 = blockOriginal.left blockOriginal.width; } return {左：左，寬度：寬度}; }, 右：函數（e）{ var blockOriginal = this.blockOriginal, offset = this.offset; if(e.clientX-offset.left>=blockOriginal.left){ var width = Math.min(offset.width - blockOriginal.left,e.clientX - offset.left - blockOriginal.left), 左 = blockOriginal.left; }其他{ var width = Math.min(offset.left blockOriginal.left - e.clientX,blockOriginal.left), 左 = Math.max(e.clientX - offset.left,0); } return {左：左，寬度：寬度}; }, rightDown : 函數(e){ 返回 $.extend(this.right(e),this.down(e)); }, leftDown : 函數(e){ return $.extend(this.left(e),this.down(e)); }, rightUp : 函數(e){ return $.extend(this.right(e),this.up(e)); }, leftUp : 函數(e){ return $.extend(this.left(e),this.up(e)); }, getValue : 函數(){ var block = this.block; 返回{ 左 : parseInt(block.css("left")), 上方 : parseInt(block.css("top")), 寬度：block.width(), 高度：block.height() } } } $.fn.clip = 函數(選項){ options.container = this; 返回新剪輯（選項）； } })(); xx = $("#container").clip({ imgC : $("#imgC") }) >腳本 身體>

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

js jquery實作圖片裁切功能_jquery