jQuery圖片裁剪插件jQuery-photoClip

一款支持手勢(shì)的裁圖插件插件

由于目前網(wǎng)上很難找到一款支持手勢(shì)的裁圖插件，因此自己動(dòng)手寫了一個(gè)。為了快速開發(fā)，依賴了很多其他的開源插件。不過目前僅解決需求即可。

依賴插件

• [jquery.transit.js] 插件 （v1.4 中已經(jīng)移除了對(duì)該插件的依賴）

• [iscroll-zoom.js] 插件（由于原插件的zoom擴(kuò)展存在幾個(gè)bug，所以建議使用demo中提供的iscroll-zoom.js文件，本人已經(jīng)將這些bug修復(fù)）

• [hammer.js] 插件 

• [lrz.all.bundle.js] 插件

操作說明

在移動(dòng)設(shè)備上雙指捏合為縮放，雙指旋轉(zhuǎn)可根據(jù)旋轉(zhuǎn)方向每次旋轉(zhuǎn)90度

在PC設(shè)備上鼠標(biāo)滾輪為縮放，每次雙擊則順時(shí)針旋轉(zhuǎn)90度

使用方法及參數(shù)配置簡(jiǎn)介

<div id="clipArea"></div>
<input type="file" id="file">
<button id="clipBtn">截取</button>
<div id="view"></div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/iscroll-zoom.min.js"></script>
<script src="js/lrz.all.bundle.js"></script>
<script src="js/jquery.photoClip.min.js"></script>
<script>
var clipArea = new bjj.PhotoClip("#clipArea", {
    size: [260, 260], // 截取框的寬和高組成的數(shù)組。默認(rèn)值為[260,260]
    outputSize: [640, 640], // 輸出圖像的寬和高組成的數(shù)組。默認(rèn)值為[0,0]，表示輸出圖像原始大小
    //outputType: "jpg", // 指定輸出圖片的類型，可選 "jpg" 和 "png" 兩種種類型，默認(rèn)為 "jpg"
    file: "#file", // 上傳圖片的<input type="file">控件的選擇器或者DOM對(duì)象
    view: "#view", // 顯示截取后圖像的容器的選擇器或者DOM對(duì)象
    ok: "#clipBtn", // 確認(rèn)截圖按鈕的選擇器或者DOM對(duì)象
    loadStart: function(file) {}, // 開始加載的回調(diào)函數(shù)。this指向 fileReader 對(duì)象，并將正在加載的 file 對(duì)象作為參數(shù)傳入
    loadComplete: function(src) {}, // 加載完成的回調(diào)函數(shù)。this指向圖片對(duì)象，并將圖片地址作為參數(shù)傳入
    loadError: function(event) {}, // 加載失敗的回調(diào)函數(shù)。this指向 fileReader 對(duì)象，并將錯(cuò)誤事件的 event 對(duì)象作為參數(shù)傳入
    clipFinish: function(dataURL) {}, // 裁剪完成的回調(diào)函數(shù)。this指向圖片對(duì)象，會(huì)將裁剪出的圖像數(shù)據(jù)DataURL作為參數(shù)傳入
});
</script>

Destroy

clipArea.destroy();