利用cropper.js实现用户图像裁剪异步上传

发布于2017年4月11日 20:55:34

最近在项目上要实现这个功能,于是想简单的整理下。经查阅资料,有2种方式可以实现用户图像上传处理。第一种,前台预设有限制的裁剪框让用户在合法范围内裁剪好图像,裁剪后的图像转成base64串异步上传到后台。第二种,根据用户前台选取的图片,前台选取图片的一边角(习惯左上角)基点,需要裁剪的大小(width和height),把这三个数据上传到后台,后台依据这些数据裁剪后返回前台一个新的路径值,前台获取即可。

本次总结的是用cropper.js插件来实现,该剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备(非常nice),支持canvas,并且支持跨浏览器使用(Chrome 38+、Firefox 33+、Internet Explorer 8+、Opera 25+、Safari 5.1+)。

先附上已经实现此功能的例子照片:

1.点击图像,触发上传

2.在裁剪框中选取合适的图像,点击确定即可裁剪;

3.确定后,裁剪的图片转成base64串后异步上传到后台,图片裁剪完成。

主要代码

主要引入文件:
<link rel="stylesheet" href="public/home/css/cropper.css">
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="public/home/js/exif.js"></script>
<script src="public/home/js/cropper.js"></script>
<script src="public/home/js/myCrop.js"></script>
HTML代码:
<div class="user_info">
<div class="user_img" id="photoBtn" onclick="document.getElementById('inputImage').click()" >
<input id="inputImage" type="file" accept="image/*" style="display: none;"/>
<img id="showImg" />
<i class="user_ry"><img src="public/home/images/m3.png" alt="会员等级"></i>
</div>
<h5>张三</h5>
</div><!--头像裁剪预览开始 -->
<div class="user_container" id="containerDiv">
<div class="row" style="display: none;" id="imgEdit">
<div class="img-container">
<img src="" alt="Picture">
</div>
</div>
<div class="row" id="actions">
<div class="docs-buttons">
<button type="button" class="btn btn-primary" id="imgCannel" data-method="destroy" title="Destroy" style="height: auto;">
<span class="docs-tooltip" data-toggle="tooltip" >
<span class="fa fa-power-off" >取消</span>
</span>
</button>
<button type="submit" class="btn btn-primary" id="imgCutConfirm" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 100, &quot;height&quot;: 100 }" style="height: auto;margin-right: 17px;" onclick="submitForm()">
<span class="docs-tooltip" data-toggle="tooltip" title="">确认</span>
</button>
</div>
</div>
</div>
<!-- 头像裁剪预览end -->

JS参数设置:
var options = {
minContainerHeight : screenHeight,
minContainerWidth : screenWidth,
aspectRatio: 1 / 1,//裁剪框比例 1:1
viewMode : 1,//显示
guides :false,//裁剪框虚线 默认true有
dragMode : "move",
build: function (e) { //加载开始
//可以放你的过渡 效果
},
built: function (e) { //加载完成
("#containerDiv").show();("#imgEdit").show();
},
zoom: function (e) {
console.log(e.type, e.detail.ratio);
},
background : false,// 容器是否显示网格背景
movable : false,//是否能移动图片
cropBoxMovable :true,//是否允许拖动裁剪框
cropBoxResizable :true,//是否允许拖动 改变裁剪框大小
};
原生态代码打包下载:点击白山羊案例下载

本文共 1 个回复

发表评论