jQuery圖片裁剪插件CropZoom使用方法與bug修複

圖片裁剪功能大家看過最多的估計是以前dz論壇中的一個flash插件+php的裁剪功能了,像jquery圖片裁剪功能了解的不多,其實此插件入門使用簡單並且方便調整了,下面一起來看看CropZoom使用方法與bug修複方法吧.

非常不錯的jQuery圖片裁剪插件CropZoom,功能非常強大,可以旋轉圖片,改變圖片顯示比例,
拖拽到指定區域進行裁剪,裁剪及時顯示裁剪圖片效果,絕對能滿足你的需求,很適合頭像圖片
裁剪方面的應用。
jQuery圖片裁剪插件CropZoom

兼容性:
兼容IE6+,fireFox2+,Opera,Safria,Chrome

使用方法:
1.載入JS,CSS文件

<link href="css/jquery-ui-1.7.2.custom.css" rel="Stylesheet" type="text/css" />
<style type="text/css">
.crop{width:680px; margin:20px auto; border:1px solid #d3d3d3; padding:4px; background:#fff}
#cropzoom_container{float:left; width:500px}
#preview{float:left; width:150px; height:200px; border:1px solid #999; margin-left:10px; padding:4px; background:#f7f7f7;}
.page_btn{float:right; width:150px; margin-top:20px; line-height:30px; text-align:center}
.clear{clear:both}
.btn{cursor:pointer}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.cropzoom.js"></script>

2.書寫HTML內容

<div class="crop">
<div id="cropzoom_container"></div>
<div id="preview"><img id="generated" src="tmp/head.gif" /></div>
<div class="page_btn">
<input type="button" class="btn" id="crop" value="剪切照片" />
<input type="button" class="btn" id="restore" value="照片複位" />
</div>
<div class="clear"></div>
</div>

3.調用函數

<script type="text/javascript">
$(function() {
var cropzoom = $('#cropzoom_container').cropzoom({
width: 500,//DIV層寬度
height: 360,//DIV層高度
bgColor: '#ccc',//DIV層背景顔色
enableRotation: true,//是否允許旋轉圖片true false
enableZoom: true,//是否允許放大縮小
selector: {
w:150,//選擇器寬度
h:200,//旋轉高度
showPositionsOnDrag:true,//是否顯示拖拽的位置洗洗腦
showDimetionsOnDrag:false,
centered: true,//居中
bgInfoLayer:'#fff',
borderColor: 'blue',//選擇區域邊框樣式
animated: false,
maxWidth:150,//最大寬度
maxHeight:200,//最大高度
borderColorHover: 'yellow'//滑鼠放到選擇器的邊框顔色
},
image: {
source: '/focus19/images/b2.jpg',
width: 450,//圖片寬度
height: 300,//圖片高度
minZoom: 30,//最小放大比例
maxZoom: 150//最大放大比例
}
});
$("#crop").click(function(){//裁剪提交
cropzoom.send('resize_and_crop.php', 'POST', {}, function(imgRet) {
$("#generated").attr("src", imgRet);
});
});
$("#restore").click(function(){//顯示初始狀態照片
$("#generated").attr("src", "tmp/head.gif");
cropzoom.restore();
});
});
</script>


以下是使用及改進筆記:

1、兼容問題修正

  首先要說的是jQuery版本的兼容問題,由于1.9以上的jQuery不提供$.browser,所以如果你用的是1.9以上的jQuery版本,就需要在控件中找出所有 $.browser.msie 並替換成可用的判斷。

/*
* IE浏覽器版本
*/
iechecker=false;
if(navigator.appName == "Microsoft Internet Explorer"){
iechecker=true;
}

2、初始化方法(附上我自己對參數的注釋)

  該控件用到jquery-ui,所以除了jquery,還需要引入相關js和css(jquery-ui可自行在官網生成,需要resize,slider,dragdrop模塊)

<link type="text/css" rel="stylesheet" href="/stylesheets/jquery-ui.min.css"/>
<script type="text/javascript" src="/javascripts/libs/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/javascripts/libs/jquery-ui.min.js"></script>

$('#CropzoomContainer').cropzoom({
width: 500, //整個容器尺寸-寬
height: 375, //整個容器尺寸-高
bgColor: '#000', //背景顔色
overlayColor: '#000', //覆蓋層顔色
selector: {
x:0, //裁剪框的位置-X軸(當centered屬性爲true時不可用)
y:0, //裁剪框的位置-Y軸(當centered屬性爲true時不可用)
w:229, //裁剪框的寬度
h:100, //裁剪框的高度
aspectRatio:false, //高寬比例固定
centered:false, //裁剪框居中(爲true時上面設置的x和y值將無效)
borderColor: 'yellow',//裁剪框的邊框顔色
borderColorHover: 'red',//滑鼠經過時裁剪框的邊框顔色
bgInfoLayer: '#FFF', //顯示裁剪信息的背景顔色
infoFontSize: 10, //顯示裁剪信息的字體大小
infoFontColor: 'blue',//顯示裁剪信息的字體顔色
showPositionsOnDrag: true,//拖動時顯示位置信息
showDimetionsOnDrag: true,//拖動時顯示精度信息
maxHeight:null, //允許裁剪框的最大高度
maxWidth:null //允許裁剪框的最大寬度
},
image: {
source:'', //原圖片地址
rotation:0, //默認旋轉角度
width:0, //原圖顯示在裁剪框中的寬度
height:0, //原圖顯示在裁剪框中的高度
minZoom:10, //最小允許縮放比例
maxZoom:150 //最大允許縮放比例
},
enableRotation: true, //允許旋轉
enableZoom: true, //允許縮放
enableResize: true, //允許改變裁剪框的大小(自定義參數,下面有改動說明)
zoomSteps: 1, //縮放步距
rotationSteps: 5, //旋轉步距
onSelectorDrag:null, //裁剪框拖動反饋函數
onSelectorDragStop: null, //裁剪框拖放結束反饋函數
onSelectorResize: null, //裁剪框改變大小反饋函數
onSelectorResizeStop: null,//裁剪框改變大小結束反饋函數
onZoom: null, //原圖縮放反饋函數
onRotate:null, //原圖旋轉反饋函數
onImageDrag:null //原圖拖動反饋函數
});

3、自行加入參數,不允許改變裁剪框尺寸
第一步是在參數裏加入enableResize參數(包括jquery.cropzoom.js中的default 和 上一步初始化中的定義)
第二步是在使用jquery-ui控件前根據參數判斷是否跳過:
if($options.enableResize){
_selector.resizable({
...
});
}

4、修改 send 方法,在提交前判斷裁剪尺寸是否合理
首先找到 send 方法,在參數獲取完成後,進行範圍判斷;
根據專案需求,我的判斷標准是裁剪框內無空白部分,代碼如下:
if(params.imageX<=params.selectorX && params.imageY<=params.selectorY && params.imageX+params.imageW>=params.selectorX+params.selectorW && params.imageY+params.imageH>=params.selectorY+params.selectorH){
//send
}
else{
alert('裁剪範圍內有空白部分');
}

5、裁剪框誤差修正(對7以下的低版本IE無效)
由于裁剪框的border是在預設的尺寸外加1px的框,所以視覺判斷會産生誤差,由于當前專案不考虛兼容ie7以下浏覽器,所以可以通過簡單地設置box-sizing即可解決這個問題。
找到 createSelector 方法,在cursor後面加入boxSizing 一項設置爲 border-box :

'cursor':'move',
'boxSizing':'border-box'

更多相關文章
  • Jquery進度條插件 Progress Bar插件應用方法搞的我小糾結了一會,最後感謝同事分享文章,得以結局,呵呵,小經驗還是要保存的個人使用總結:<script type="text/網頁特效" src="/Scripts/jquery-1.4.4.min.j ...
  • jquery圖片上傳和裁剪應用:Croppie使用例子
    圖片裁剪我們需要通過jquery定位然後把坐標傳給php再由php進行圖片的裁剪操作了,今天我們就一起來看一篇關于jquery圖片上傳和裁剪應用:Croppie使用例子,希望對大家有幫助.在很多應用需要上傳本地圖片然後再按尺寸適當裁剪以符合網站對圖片尺寸的要求.最常見的就是各用戶系統要求用戶上傳和裁 ...
  • 設置背景圖片,以突出透明度的效果及jquery png背景透明插件實例教程 <head> <title>toggle()</title> <style type="text/css教程"> <!-- body{bac
  • 圖片裁剪是根據用戶提供的坐標然後在指定圖片上利用圖片裁剪函數imagecopyresampled進行圖片剪切了,下面來看一個例子.代碼如下所示: 代碼如下 <?php //在一個大的背景圖片中裁剪出指定區域的圖片,以
  • ajax乱码是很多编程的朋友会碰到, 也正是因为中文问题,jquery ajax get 乱码解决方法在中国程序员人会常常提到,因为ajax默认发送的编码是uft-8所,而我们大多数据都喜欢使用gbk或gb2312网
  • <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">< ...
  • 本文章主要彙集了和種marquee和js(javascript)圖片無縫滾動方法,有需要用的同學可嘗試參考參考.下面是我在網上找的一個比較簡單的marquee和js相結合解決圖片無縫滾動的方法,包括向上.下.左.右四
  • 本文章來給各位同學介紹一下關于jQuery中serialize().serializeArray()和param()方法的一些用法吧,希望此文章對各位朋友會有所幫助哦.與JQuery中其他方法一樣,serialize
一周排行