jcrop为基于jquery库实现的图片裁切插件。当使用该插件使需要引入jquery和jcrop(包括js文件和css文件)。
//css文件的引入
<link rel="stylesheet" type="text/css" href="/Jcrop/css/jquery.Jcrop.min.css">
//js文件的引入
<script type="text/javascript" src="javascripts/jquery.js"></script>
<script type="text/javascript" src="/Jcrop/js/jquery.Jcrop.js"></script>
在项目中,需要实现当点击上传图片时,出现弹出框对上传的图片进行裁切,裁切完成后。点击提交按钮,改变用户的头像。
实现的过程如下:
- 点击上传图片按钮,触发ajax请求,将图片上传。上传成功后,触发ajax的回调函数,出现弹出框。
- 在弹出框中显示要上传的图片,并且将该图片作为jcrop的实例,对图像进行裁切,同时显示裁切图片的预览图
- 点击提交按钮,将jcrop的处理结果作为参数,提交请求。其中jcrop的参数包括相对于原图像的裁切的起点坐标以及裁切的宽度。
- 后台处理上传的图片和图片的裁切
前端代码如下
EventUtil.addHandler(userImgUpload, "change", function(e){
var e = EventUtil.getEvent(e);
//上传图片 当上传成功后 触发弹出框
var formd = new FormData();
formd.append("file",this.files[0]);
ajax("post","userSet/imgupload", null, formd, function(res){
var str = "<div class='img-wrap'><div class='upload-origin'><img id='upload-img' src="+JSON.parse(res).img+"></img></div><div class='pre-img'><span id='pre-big'><img id='crop-pre-big' src="
+JSON.parse(res).img+"></span><span id='pre-middle'><img id='crop-pre-middle' src="+JSON.parse(res).img+"></span><span id='pre-small'><img id='crop-pre-small' src="+JSON.parse(res).img+
&