图片剪切工具Jcrop在JavaScript中使用

    最近接手了一个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.服务端根据图片文件和坐标，尺寸做截取

    交给后台同事吧，拿到后台返回数据做相应处理即可。