jQuery頭像裁剪工具jcrop用法實例(附演示與demo源碼下載)
本文實例講述了jQuery頭像裁剪工具jcrop用法。分享給大家供大家參考,具體如下:
頭像裁剪工具目前比較流行的是flash和jquery的。個人覺得用jquery的比較好,因為代碼仔細研究一下,基本上能明白怎么回事,想改的話也比較容易。
有一個例子,請參考:jcrop例子demo ,是根jcrop的例子改的,添加以下二個特點:
1,居中顯示,并且可拖拉,改變截取的大小
2,預(yù)覽的圖片,根拖拉的大小成比例。
以下是js代碼,作了簡單的封裝
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>jcrop 圖片拖動</title> <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.Jcrop.min.js" type="text/javascript"></script> <link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" /> <link rel="stylesheet" href="demos.css" type="text/css" /> </head> <body> <div id="outer"> <div class="jcExample"> <div class="article"> <h1>上傳頭像拖動例子</h1> <table> <tr> <td> <img src="sago.jpg" id="target" alt="Flowers" /> </td> <td> <div style="width:100px;height:100px;overflow:hidden;" id="aa"> <img src="sago.jpg" id="preview" alt="Preview" class="jcrop-preview" /> </div> </td> </tr> </table> </div> </div> </div> </body> <script type="text/javascript"> new cutImage().init(); function cutImage(){ var oop = this; this.option = { x:170, y:110, w:350, h:200, t:'target', p:'preview', o:'aa' } this.init = function(){ oop.target(); } this.target = function(){ $('#'+oop.option['t']).Jcrop({ onChange: oop.updatePreview, onSelect: oop.updatePreview, aspectRatio: 1, setSelect: [ oop.option['x'], oop.option['y'], oop.option['w'],oop.option['h'] ], bgFade: true, bgOpacity: .5 }); } this.updatePreview = function(obj){ if (parseInt(obj.w) > 0) { var rx = $('#'+oop.option['o']).width()/ obj.w; var ry = $('#'+oop.option['o']).height()/ obj.h; $('#'+oop.option['p']).css({ width: Math.round(rx*$('#'+oop.option['t']).width()) + 'px', height: Math.round(ry*$('#'+oop.option['t']).height()) + 'px', marginLeft: '-' + Math.round(rx * obj.x) + 'px', marginTop: '-' + Math.round(ry * obj.y) + 'px' }); } } } </script> </html>
jquery jcrop結(jié)合jquery ajax upload的話,可以使頭像上傳截取功能,很人性化。
完整實例代碼點擊此處本站下載。
更多關(guān)于jQuery插件相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- 利用jQuery插件imgAreaSelect實現(xiàn)圖片上傳裁剪(同步顯示圖像位置信息)
- 利用jQuery插件imgAreaSelect實現(xiàn)圖片上傳裁剪(放大縮?。?/a>
- jquery.Jcrop結(jié)合JAVA后臺實現(xiàn)圖片裁剪上傳實例
- jQuery實現(xiàn)圖片上傳和裁剪插件Croppie
- jQuery插件jcrop+Fileapi完美實現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼分享
- js+jquery實現(xiàn)圖片裁剪功能
- jquery實現(xiàn)圖片裁剪思路及實現(xiàn)
- JQuery Jcrop 實現(xiàn)圖片裁剪的插件
- jquery實現(xiàn)自定義圖片裁剪功能【推薦】
相關(guān)文章
JQuery UI的拖拽功能實現(xiàn)方法小結(jié)
JQuery UI是JQuery官方支持的WebUI 代碼庫,包含底層交互、動畫、特效等API,并且封裝了一些Web小部件(Widget)。同時,JQuery UI繼承了jquery的插件支持,有大量的第三方插件可以豐富JQuery UI的功能2012-03-03jQuery JSON實現(xiàn)無刷新三級聯(lián)動實例探討
無刷新三級聯(lián)動的實現(xiàn)方法有很多,今天將與大家討論下jQuery JSON如何實現(xiàn),感興趣的朋友們可以參考下哈2013-05-05jQuery實現(xiàn)彩帶延伸效果的網(wǎng)頁加載條loading動畫
這篇文章主要介紹了jQuery實現(xiàn)彩帶延伸效果的網(wǎng)頁加載條loading動畫,涉及jQuery動畫效果的實現(xiàn)技巧,非常簡單實用,需要的朋友可以參考下2015-10-10js jquery獲取隨機生成id的服務(wù)器控件的三種方法
由于ASP.NET網(wǎng)頁運行后,服務(wù)器控件會隨機生成客戶端id,jquery獲取時候不太好操作,下面為大家整理了三種方法,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-07-07