web端上傳圖片，截取證件照

如圖：

 

1.html

<div class="ycupload-mainbox">
	<div class="ycuplod_area" ontouchstart="">
		<div class="cover-wrap" >	
			<div class="bomb_box">
				<div id="clipArea" class="clipArea" ></div>
				<div class="img_con">
					<div class="clip_btn_tip">
					滾動鼠標放大縮小圖片
					</div>
					<button id="clipBtn" class="clipbtn" >保存照片</button>
				</div>
			</div>
		</div>
		<div class="img_center_area">
			<div id="view_img" class="img_view" title="請上傳 128*150 的封面圖片">aaa</div>
			<input type="file" class="file_photo_img" id="file_img">
		</div>
	</div>
</div>

<script src="../../../../assets/admin/upload_img/iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../../assets/admin/upload_img/hammer.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../../assets/admin/upload_img/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../../assets/admin/upload_img/jquery.photoClip.min.js" type="text/javascript" charset="utf-8"></script>	
   

　2,js

var clipArea = new bjj.PhotoClip("#clipArea", {
			size: [192, 225],// 截取框的寬和高組成的數組。默認值爲[260,260]
			outputSize: [128, 150], // 輸出圖像的寬和高組成的數組。默認值爲[0,0]，表示輸出圖像原始大小
			//outputType: "jpg", // 指定輸出圖片的類型，可選 "jpg" 和 "png" 兩種種類型，默認爲 "jpg"
			file: "#file_img", // 上傳圖片的<input type="file">控件的選擇器或者DOM對象
			view: "#view_img", // 顯示截取後圖像的容器的選擇器或者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);
			}
	});

　　3.css

/*上傳證件照 action*/
div.container{padding-left: 0;padding-right: 0;}
div.row{margin-left: 0;margin-right: 0;}
.padding0{padding-left: 0;padding-right:0;}
.bomb_box{width:350px;height:450px;margin:100px auto;background-color:#FFFFFF;overflow: hidden;border-radius:4px;}
.clipArea{height: 350px;}
.img_con{height:56px;line-height:36px;text-align: center;padding-top:8px;}
.ycuplod_area{min-height:1px;line-height:160px;text-align:center;position:relative;}
.cover-wrap{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.4);z-index: 10000000;text-align:center;}
.img_center_area{
	width:128px;height:150px;border-radius: 4px;background:url(../img/lay_img.png);margin-left: 19px;
	color: #FFFFFF;font-size: 14px;text-align:center;line-height:32px;outline:none;position:relative;
}
.img_view{width:128px;height:150px;}
.clip_btn_tip{width: 100%;text-align: center;font-size: 14px;color: #aaa;}
.clipbtn{
	width:100px;height: 32px;border-radius: 4px;background-color:#3387c9;color: #FFFFFF;
	font-size: 14px;text-align: center;line-height: 32px;outline: none;border: 1px solid #3387c9;
	
}
.file_photo_img{cursor:pointer;opacity:0;filter:alpha(opacity=0);width:100%;height:100%;position:absolute;top:0;left:0;}
/*上傳證件照 end*/