熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jcrop基本參數一覽

2013-11-15 12:15:52  來源: JSP教程 

  jcrop原始下載頁面猛擊此處

  基本使用方法如下

  在head部分(<head>和</head>之間)插入相關css和js文件

  <link rel="stylesheet" href="css/jqueryJcropcss">
<script src="js/jqueryjs"></script>
<script src="js/jqueryJcropjs"></script>

  在head部分插入回調函數等相關處理參數

復制代碼 代碼如下:
<script language="Javascript">
  <!
  jQuery(function($){
 // Create variables (in this scope) to hold the API and image size
  var jcrop_api boundx boundy;

  $(#cropbox)Jcrop({
  minSize: []
  maxSize:[]
  setSelect: []
  boxWidth:
  borderOpacity:
  keySupport:false
  dragEdges:false
  allowSelect:false
  allowResize:false
  bgOpacity:
  boundary:
  //allowMove:false
  addClass: jcrophandle
  onSelect: updateCoords
  }
  function(){
  // Use the API to get the real image size
  var bounds = thisgetBounds();
  boundx = bounds[];
  boundy = bounds[];
  // Store the API in the jcrop_api variable
  jcrop_api = this;
  });
  function updateCoords(c)
  {
  $(#x)val(cx);
  $(#y)val(cy);
  $(#w)val(cw);
  $(#h)val(ch);
  };
  function checkCoords()
  {
  if (parseInt($(#w)val())) return true;
  alert(請選擇裁剪區域);
  return false;
  };
  });
>
</script>

  給相關圖片加上id以便識別

  <img id="cropbox" src="xjpg">
這樣就能實現最簡單的裁剪效果至於如何結合php等動態語句處理圖片在置頂的文章裡已經給出了示例

  下表給出基本options參數設置
 

名稱 默認值 說明 allowSelect true 允許新選框 allowMove true 允許選框移動 allowResize true 允許選框縮放 trackDocument true   baseClass "jcrop" 基礎樣式名前綴說明class="jcropholder"更改的只是其中的 jcrop addClass null 添加樣式會假設值為 "test"那麼會添加樣式到 class="test jcropholder" bgColor "black" 背景顏色顏色關鍵字HEXRGB 均可 bgOpacity 背景透明度 bgFade false 使用背景過渡效果 borderOpacity 選框邊框透明度 handleOpacity 縮放按鈕透明度 handleSize 縮放按鈕大小 handleOffset 縮放按鈕與邊框的距離 aspectRatio 選框寬高比說明width/height keySupport true 支持鍵盤控制按鍵列表上下左右(移動)Esc(取消)Tab(跳出裁剪框到下一個) cornerHandles true 允許邊角縮放 sideHandles true 允許四邊縮放 drawBorders true 繪制邊框 dragEdges true 允許拖動邊框 fixedSupport true   touchSupport null   boxWidth 畫布寬度 boxHeight 畫布高度 boundary 邊界說明可以從邊界開始拖動鼠標選擇裁剪區域 fadeTime 過度效果的時間 animationDelay 動畫延遲 swingSpeed 過渡速度 minSelect [] 選框最小選擇尺寸說明若選框小於該尺寸則自動取消選擇 maxSize [] 選框最大尺寸 minSize [] 選框最小尺寸 onChange function(){} 選框改變時的事件 onSelect function(){} 選框選定時的事件 onRelease function(){} 取消選框時的事件

  下表是api方法

名稱 說明 setImage(string) 設定(或改變)圖像jcrop_apisetImage("newpicjpg") setOptions(object) 設定(或改變)參數格式與初始化設置參數一樣 setSelect(array) 創建選框參數格式為[xyxy] animateTo(array) 用動畫效果創建選框參數格式為[xyxy] release() 取消選框 disable() 禁用 Jcrop說明已有選框不會被清除 enable() 啟用 Jcrop destroy() 移除 Jcrop tellSelect() 獲取選框的值(實際尺寸)例子consolelog(jcrop_apitellSelect()) tellScaled() 獲取選框的值(界面尺寸)例子consolelog(jcrop_apitellScaled()) getBounds() 獲取圖片實際尺寸格式為[wh] getWidgetSize() 獲取圖片顯示尺寸格式為[wh] getScaleFactor() 獲取圖片縮放的比例格式為[wh]
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20605.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.