技術標籤：Jcropjavascripthtmlcss

最近接手了一個JavaScript，html，css開發的專案，需要做頭像上傳的功能，需要使用者在頁面擷取圖片。找了相關資料後決定用Jcrop。在使用過程中，發先網上的例子沒法直接拿過來用，然後官方文件又不詳細，這裡記錄一下使用方法。

GitHub：https://github.com/tapmodo/Jcrop

一、使用

1.HTMl

引用以上兩個檔案即可，檔案可從GitHub下載

<link rel="stylesheet" href="css/jcrop.css" />
<script type="text/javascript" src="js/comm/jcrop.js"></script>
 

現有頭像展示，並做點選選擇圖片事件：

<div id="meAvatar" class="item flexbox flex-alignc wc_material-cell">
	<label class="lbl flex1">頭像</label>
	<!-- 預設圖片顯示 -->
	<img class="uimg wc_arr" src="img/uimg/u_chat-img14.jpg" /> 
	<!-- 系統檔案選擇 -->
	<input id="avatarInput" style="display: none;" type="file" onclick="fileChooserAvatar(this)" accept="image/*" multiple />
</div>
 

圖片預覽：

其中id : x, y, w, h分別為選擇框的x軸起始座標，y軸起始座標，寬，高。percentX,percentY為圖片在螢幕上顯示的尺寸，高和寬。

<div id="avatarView" class="wc_popup-imgPreview" style="display: none;">
	<div class="swiper-container J_swiperImgPreview">
		<div class="wc_headerBar fixed">
			<div class="inner flexbox">
				<a class="back splitline" onclick="enterAboutme()"></a>
				<h2 class="barTit flex1">自定義頭像</h2>
				<div id="setAvatarBtn" class="head_button_div"><a class="head_ok_button">確定</a></div>
			</div>
		</div>
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<input type="hidden" id="x" name="x" />
				<input type="hidden" id="y" name="y" />
				<input type="hidden" id="w" name="w" />
				<input type="hidden" id="h" name="h" />
				<input type="hidden" id="percentX" name="percentX" />
				<input type="hidden" id="percentY" name="percentY" />
				<div class="swiper-zoom-container avatar">
					<img id="avatarImg" src=”demo.jpg” class=”jcrop-preview”>
				</div>
			</div>
		</div>
	</div>
</div>
 

2. JavaScript

使用者點選選擇頭像後，觸發系統圖片選擇方法

	//選擇頭像
	var fileSelect = document.getElementById("meAvatar")
	var fileElem = document.getElementById("avatarInput")
	var imgData = null

	fileSelect.addEventListener("click", function (e) {
		if (fileElem) {
			fileElem.click();
		}
	}, false);

具體使用方式見註釋：

function fileChooserAvatar(fileInp) {
	fileInp.onchange = function () {
		if (!this.files.length) return;
		var files = Array.prototype.slice.call(this.files);
		files.forEach(function (file, i) {
			if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;

			//將使用者選擇的圖片顯示在頭像預覽處
			$("#avatarImg").attr("src", window.URL.createObjectURL(files[i])); 
			$("#avatarView").show();

			var reader = new FileReader();
			//獲取圖片大小
			var size = file.size / 1024 > 1024 ? (~~(10 * file.size / 1024 / 1024)) / 10 + "MB" : ~~(file.size / 1024) + "KB";
			reader.onload = function () {
				var result = this.result;
				var img = new Image();
				img.src = result;

				var jcp;
				Jcrop.load('avatarImg').then(img => {
					jcp = Jcrop.attach(img, { multi: true });
					const rect = Jcrop.Rect.sizeOf(jcp.el);
					jcp.newWidget(rect.scale(.7, .7).center(rect.w, rect.h));  //初始化選擇框大小
					jcp.listen('crop.change',function(widget,e){ //選擇區域改變後觸發
						const pos = widget.pos;
						setPos(pos) 
					}); 
					jcp.setOptions({  //屬性設定
						allowSelect : false,
						aspectRatio : 1
					});
					setPos(jcp.active.pos) //賦值預設選擇框座標尺寸
					
					//getImageDimensions()，為獲取圖片顯示在螢幕的尺寸
					$("#percentX").val(jcp.getImageDimensions()[0]);
					$("#percentY").val(jcp.getImageDimensions()[1]);

					jcp.focus();

					//Jcrop樣式與專案樣式衝突，選擇框之外的透明背景顯示不出來，則用以下方式處理
					$(".jcrop-image-stage").css("z-index", "1")
				});

				//將選擇框座標複製給對應input
				function setPos(pos) {
					$("#x").val(pos.x);
					$("#y").val(pos.y);
					$("#w").val(pos.w);
					$("#h").val(pos.h);
				}
			};
			reader.readAsDataURL(file);
		})
	};
}

提交方法：

此處為Socket提交，其他方式均可以使用，資料都已拿到。

$("#setAvatarBtn").on("click", function () {
	var mData = {"avatar":imgData, "x":$('#x').val(), "y":$('#y').val(), "width":$('#w').val(), "height":$('#h').val(), "percentX":$('#percentX').val(), "percentY":$('#percentY').val()};
	editUser(mData);
})

3.CSS

自己寫，你可以的。

4.服務端根據圖片檔案和座標，尺寸做擷取

交給後臺同事吧，拿到後臺返回資料做相應處理即可。