Jquery圖片裁剪插件PhotoClip使用說明

在Pc端實現圖片的裁剪功能，可以使用Jquery圖片裁剪插件-------PhotoClip

PhotoClip插件描述

該插件可以支持手機端，PC端圖片的旋轉，縮放，移動等操作。

依賴插件

• [jquery.transit.js] 插件 （v1.4 中已經移除了對該插件的依賴）
• [iscroll-zoom.js] 插件
• [hammer.js] 插件
• [lrz.all.bundle.js] 插件

操作說明

在PC設備上鼠標滾輪爲縮放，每次雙擊順時針旋轉90°。

使用方法及配置參數簡介

<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], // 截取框的寬和高組成的數組。默認值爲[260,260]
    outputSize: [640, 640], // 輸出圖像的寬和高組成的數組。默認值爲[0,0]，表示輸出圖像原始大小
    //outputType: "jpg", // 指定輸出圖片的類型，可選 "jpg" 和 "png" 兩種種類型，默認爲 "jpg"
    file: "#file", // 上傳圖片的<input type="file">控件的選擇器或者DOM對象
    view: "#view", // 顯示截取後圖像的容器的選擇器或者DOM對象
    ok: "#clipBtn", // 確認截圖按鈕的選擇器或者DOM對象
    loadStart: function(file) {}, // 開始加載的回調函數。this指向 fileReader 對象，並將正在加載的 file 對象作爲參數傳入
    loadComplete: function(src) {}, // 加載完成的回調函數。this指向圖片對象，並將圖片地址作爲參數傳入
    loadError: function(event) {}, // 加載失敗的回調函數。this指向 fileReader 對象，並將錯誤事件的 event 對象作爲參數傳入
    clipFinish: function(dataURL) {}, // 裁剪完成的回調函數。this指向圖片對象，會將裁剪出的圖像數據DataURL作爲參數傳入
});
</script>

Demo

寫一個例子，先看一下最後實現的效果：

使用鼠標滾輪可以縮放照片大小，雙擊照片可以順時針旋轉90°。
首先，我們要寫一個圖片本身所在的div

						<div class="form-group">
			                    <label class="col-md-2 control-label" for="id">個人圖片</label>
			                    <div class="col-md-8">
			                    	<input type="hidden" name="imageUrl" value="${obj.imageUrl!}" class="form-controluploadinput" readonly="readonly" id="imageUrl"/>
			                        <div id="view" class="clip-view-default" style="width:400px;height:225px;background-image:url(bootstrap-3.3.7/images/icon-add.png);">
			        					<img id="userImg" src="${obj.imageUrl?default('')}" style="width:400px;height:225px;">
			                        </div>
			                        <div style="height:10px"></div>
			                        <input type="file" id="file" style="">
			                        <div class="btn btn-primary" style="display:none;">上傳圖片 </div>
			                    </div>							
						</div>

然後在寫一個PhotoClip組件必須要存在的一個 id = clipArea的div

<div class="cover-wrap" >
    <div class="clipBgn" >
        <div id="clipArea" style="margin:10px;height: 520px;"></div>
        <div class="clipButton" >
            <p>使用說明：點擊可移動圖片，滾動鼠標縮放圖片</p>
            <button id="clipBtn" onclick="imgHidden()" class="btn btn-primary">保存圖片</button>
        </div>
    </div>
</div>

需要注意的是，在配置PhotoClip的時候，以下必須存在，否則組件配置會不成功。分別爲 id="file"的控件的選擇器或者DOM對象，id="view"的顯示截取後圖像的容器的選擇器或者DOM對象，id="clipButton"的確認截圖按鈕的選擇器或者DOM對象。

最後在js方法中，配置整個組件：

var clipArea = new bjj.PhotoClip("#clipArea", {
    size: [${width}, ${height}],// 截取框的寬和高組成的數組。默認值爲[260,260]
    outputSize: [${width}, ${height}], // 輸出圖像的寬和高組成的數組。默認值爲[0,0]，表示輸出圖像原始大小
    outputType: "jpg", // 指定輸出圖片的類型，可選 "jpg" 和 "png" 兩種種類型，默認爲 "jpg"
    file: "#file", // 上傳圖片的<input type="file">控件的選擇器或者DOM對象
    view: "#view", // 顯示截取後圖像的容器的選擇器或者DOM對象
    ok: "#clipBtn", // 確認截圖按鈕的選擇器或者DOM對象
    loadStart: function() {
        // 開始加載的回調函數。this指向 fileReader 對象，並將正在加載的 file 對象作爲參數傳入
        $('.cover-wrap').fadeIn();
        console.log("照片讀取中");
    },
    loadComplete: function() {
        // 加載完成的回調函數。this指向圖片對象，並將圖片地址作爲參數傳入
        console.log("照片讀取完成");
    },
    //loadError: function(event) {}, // 加載失敗的回調函數。this指向 fileReader 對象，並將錯誤事件的 event 對象作爲參數傳入
    clipFinish: function(dataURL) {
        // 裁剪完成的回調函數。this指向圖片對象，會將裁剪出的圖像數據DataURL作爲參數傳入
        $('.cover-wrap').fadeOut();
	    $('#view').css('background-size','100% 100%'); 
        console.log(dataURL); //輸出圖像base64
	    }
});

配置完這些基本上使用功能沒什麼大問題了，最後裁剪完成的回調函數，會把圖像數據DataURL作爲參數傳入，存儲裁剪完的圖像時，可以先把Base64圖像數據轉化爲圖片文件然後在進行存儲。