首頁 > 其他

jQuery EasyUI 的截圖外掛程式（imgAreaSelect）用法

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

目前大多數的SNS網站都有自訂頭像的功能，而自訂頭像又有很多種方法可以實現，比如說大多數網站都在使用Flash，還有就是 Javascript。而如果自己寫一個Javascript功能的話比較複雜，而且對於瀏覽器的相容也不是很好，jQuery就給我們提供了這 樣的外掛程式——imgAreaSelect

官方網站：http://odyniec.net/projects/imgareaselect/

這裡介紹一下快速使用這個外掛程式的方法：

首先在官方網站下載這個外掛程式（http://odyniec.net/projects/imgareaselect/jquery.imgareaselect-0.9.1.zip），目前版本是0.9.1，在下載的外掛程式中會有scripts
和CSS檔案夾，scripts檔案夾會包含jQuery檔案和imgareaSelect檔案，CSS檔案夾則提供一些預設的樣式和一些生動的樣式，這個使用者可以自己選擇使用哪一種方式。


準備工作完成後，我們可以建立一個HTML 頁面，在頁面的<head>之間加入下面的代碼：

<head>

…
<link rel=”stylesheet” type=”text/css” href=”css/imgareaselect-default.css” />
<script type=”text/javascript” src=”scripts/jquery.min.js”></script>
<script type=”text/javascript” src=”scripts/jquery.imgareaselect.pack.js”></script>

…

</head>

然後調用imgAreaSelect
方法來啟用圖片的選中地區

<script type=”text/javascript”>

$(document).ready(function () {
$(‘img#photo’).imgAreaSelect({ handles: true, onSelectEnd: someFunction });

});

</script>

imgAreaSelect
方法有很多參數可以定義：

參數 描述
aspectRatio 設定選取地區的顯示比率，如：”4:3“
autoHide 如果設定為true，當選擇地區選取項目結束時消失，預設值為：false
classPrefix 這是一個字串，表示外掛程式樣式的類名加首碼，預設值為"imgareaselect"
disable 如果設定為true，禁用外掛程式
enable 如果設定為true，外掛程式被重新啟用
fadeSpeed 如果設定為大於零的數字，則用優美的淡入/淡齣動畫來顯示圖片，預設值為 false
handles 如果設定為true，調整控點則會顯示在選擇地區內，如果設定為"corners"，則只有角處理會顯示調整控點，預設值為false
hide 如果設定為true，選擇範圍是隱藏
imageHeight 圖片的真實高度 (if scaled with the CSSwidthandheightproperties)
imageWidth 真實圖片寬度 (if scaled with the CSSwidthandheightproperties)
instance 如果設定為true，imgAreaSelect() 調用返回一個imgAreaSelect綁定到的映像的執行個體，使您可以使用它的API方法
keys 啟用/禁用鍵盤支援，預設值為false
maxHeight 選取的最大高度（單位為像素）
maxWidth 選取的最大寬度（單位為像素）
minHeight 選取的最小高度（單位為像素）
minWidth 選取的最小寬度（單位為像素）
movable 確定選取是否可以移動，預設值為true
parent 一個jQuery對象或選擇字串，指定被追加到父元素，預設值為"body"
persistent 如果設定為true，選擇區以外的點擊將不會啟動一個新的選區（即使用者將只能移動/調整現有的選擇範圍），預設值為false
resizable 確定是否選擇面積應可調整大小，預設值為true
show 如果設定為true，選區則會顯示
x1
y1		 最初選擇地區的左上方座標
x2
y2		 最初選擇地區的右上方座標
zIndex 外掛程式元素的z-index值，正常情況下imgAreaSelect會自動分配，但有少數情況，有必要將其設定為制定值
onInit 外掛程式初始化時的回呼函數
onSelectStart 外掛程式開始選擇時的回呼函數
onSelectChange 外掛程式改變選區時的回呼函數
onSelectEnd 外掛程式結束選區時的回呼函數

以上是翻譯以後的描述，讀者也可以瀏覽原始文檔：
http://odyniec.net/projects/imgareaselect/usage.html

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More