最近接手了一个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 = nullfileSelect.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")});//将选择框坐标复制给对应inputfunction 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.服务端根据图片文件和坐标，尺寸做截取

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

图片剪切工具Jcrop在JavaScript中使用相关推荐

计算机屏幕剪切是怎人们剪切呀,如何使用剪切工具在Windows 10中截取屏幕截图...
屏幕截图是在给定时刻的计算机或智能手机屏幕输出的图像. 您可能遇到需要在给定时间捕获计算机显示屏上特定区域的屏幕截图的情况. 对于Windows计算机,剪切工具是一项很好的资产. 自Windows V ...
KRSReader酷狗音乐歌词写真图片提取工具(提取KRS文件中的图片)
最近发现酷狗音乐中的歌词写真图片还是比较给力的,很多友友表示喜欢,但是苦于不懂得如何提取,小菜利用周末闲暇时间写了一个小工具,专门用来提取酷狗音乐歌词写真图片. 废话不多说,软件界面如下: 使用说明: ...
关于系统图片剪切工具的大图剪切方案
最近项目用到了一个剪切上传任意比例的功能,通过百度的千篇一律的方法: /** * 裁剪图片方法实现 * * @param uri */ public void startPhotoZoom(Uri u ...
[译]通过使用Chrome的开发者工具来学习JavaScript
原文:https://gist.github.com/4158604 本文作者是Peter Rybin,Chrome开发者工具团队成员. 本文中,我们将通过使用Chrome的开发者工具,来学习Java ...
图片识别工具怎么用？这几个识别图片方法你要知道
图片识别工具在现代社会中发挥着越来越重要的作用.在日常生活中,我们常常需要将纸质文件或图片转换为电子文件,以方便传输和处理.那么,小伙伴们知道图片识别工具怎么用吗?如果你还不是特别清楚的话,相信看完这 ...
UWP 图片剪切旋转工具
原文:UWP 图片剪切旋转工具好久没撸随笔了,明天终于放假休息了..准备去进行信仰充值,看<魔兽>去(话说surface phone 好久出,让我这个做UWP的也充点信仰..) 先上下效 ...
用JavaScript实现图片剪切效果
学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第 ...
javascript图片剪切效果
序一(08/07/21) 很久之前就在一个网站的截取相片的功能中看到这个效果,也叫图片裁剪.图片剪切(设置一下也可以做出放大镜等类似的效果). 当时觉得很神奇,碍于水平有限,没做出来. 前些日子突然想 ...
Android拍照相册相关的图片获取与剪切工具类
整理的常用的获取拍照缩略图,原图,剪切图,获取相册的原图与剪切图,图片的缩放(一般上传服务器会用到),URI Bitmap File直接的转换关系.使用简单方便: 有完整Demo 如有需要请留下邮箱 ...

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