jcrop基本參數一覽

2019-11-20 22:31:02

字體：大中小

來源：轉載

供稿：網友

jcrop原始下載頁面：猛擊此處

基本使用方法如下：

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

二、在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: [0,0],
  maxSize:[0,0],
  setSelect: [0,0,0,0],
  boxWidth:800,
  borderOpacity:0.3,
  keySupport:false,
  dragEdges:false,
  allowSelect:false,
  allowResize:false,
  bgOpacity:0.2,
  boundary:0,
  //allowMove:false,
  addClass: 'jcrop-handle',
  onSelect: updateCoords,
  },
  function(){
  // Use the API to get the real image size
  var bounds = this.getBounds();
  boundx = bounds[0];
  boundy = bounds[1];
  // Store the API in the jcrop_api variable
  jcrop_api = this;
  });
  function updateCoords(c)
  {
  $('#x').val(c.x);
  $('#y').val(c.y);
  $('#w').val(c.w);
  $('#h').val(c.h);
  };
  function checkCoords()
  { 
  if (parseInt($('#w').val())) return true;
  alert('請選擇裁剪區域');
  return false;
  }; 
  });
-->
</script>

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

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

下表給出基本options參數設置：

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

下表是api方法

名稱	說明
setImage(string)	設定（或改變）圖像。例：jcrop_api.setImage("newpic.jpg")
setOptions(object)	設定（或改變）參數，格式與初始化設置參數一樣
setSelect(array)	創建選框，參數格式為：[x,y,x2,y2]
animateTo(array)	用動畫效果創建選框，參數格式為：[x,y,x2,y2]
release()	取消選框
disable()	禁用 Jcrop。說明：已有選框不會被清除。
enable()	啟用 Jcrop
destroy()	移除 Jcrop
tellSelect()	獲取選框的值（實際尺寸）。例子：console.log(jcrop_api.tellSelect())
tellScaled()	獲取選框的值（界面尺寸）。例子：console.log(jcrop_api.tellScaled())
getBounds()	獲取圖片實際尺寸，格式為：[w,h]
getWidgetSize()	獲取圖片顯示尺寸，格式為：[w,h]
getScaleFactor()	獲取圖片縮放的比例，格式為：[w,h]