jQuery圖片上傳裁剪區域圖片代碼



106 423 142



特效描述:jQuery圖片上傳 裁剪區域圖片,jQuery圖片上傳裁剪區域圖片代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/ycbootstrap.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">

2. 引入JS

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

3. HTML代碼

<div class="yc-upload-wrap">
	<div class="yc-upload-box">
		<div class="container">
			<div class="row">
				<div class="col-md-12 col-sm-12 col-xs-12" style="padding:0;">
					<div class="ycupload-mainbox">
						<div class="ycupload-main1" style="overflow:hidden;padding-left:25px;">
							<span style="float:left;color:#ff5a5a;font-size:14px;line-height:60px;font-weight:900;margin-right:7px;">
								&middot;
							</span>
							<span style="float:left;color:#333;font-size:16px;line-height:60px;margin-right:28px;">
								上傳封面
							</span>
						</div>
						<div class="ycupload-line"></div>
						<div style="height:30px;"></div>
						<div  style="min-height:1px;">
							<div class="container">
								<div class="row">
									<div class="col-md-12 col-sm-12 col-xs-12" style="padding-right:0;padding-left:36px;">
										<!--<a href="javascript:void(0);" class="cover-uploadBtn">
											<img src="img/yc_uploadimg_06.png">
											<div id="clipArea"></div>
											<input type="file" id="file">
											<button id="clipBtn">截取</button>
										</a>
										<div id="view"></div>-->
										<div style="min-height:1px;line-height:160px;text-align:center;position:relative;" ontouchstart="">
											<div class="cover-wrap" style="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;">	
												<div class="" style="width:900px;height:600px;margin:100px auto;background-color:#FFFFFF;overflow: hidden;border-radius:4px;">
													<div id="clipArea" style="margin:10px;height: 520px;"></div>
													<div class="" style="height:56px;line-height:36px;text-align: center;padding-top:8px;">
														<button id="clipBtn" style="width:120px;height: 36px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align: center;line-height: 36px;outline: none;">保存封面</button>
													</div>
												</div>
											</div>
											<div id="view" style="width:214px;height:160.5px;" title="請上傳 428*321 的封面圖片"></div>
											<div style="height:10px;"></div>
											<div class="" style="width:140px;height:32px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align:center;line-height:32px;outline:none;margin-left:37px;position:relative;">
												點擊上傳封面圖
												<input type="file" id="file" style="cursor:pointer;opacity:0;filter:alpha(opacity=0);width:100%;height:100%;position:absolute;top:0;left:0;">
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div style="height:25px;"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
//上傳封面
//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
var clipArea = new bjj.PhotoClip("#clipArea", {
	size: [428, 321],// 截取框的寬和高組成的數組。默認值為[260,260]
	outputSize: [428, 321], // 輸出圖像的寬和高組成的數組。默認值為[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);
	}
});
//clipArea.destroy();
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 圖片拖動 圖片拖拽 頭像上傳 圖片上傳 頭像截圖
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表