插件下载地址：http://www.jq22.com/jquery-info18167
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基于cropper.js的图片裁剪</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" href="css/cropper.min.css"> <link rel="stylesheet" href="css/ImgCropping.css"> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src="js/cropper.min.js"></script> </head> <body style="background: #eee"> <button id="replaceImg" class="l-btn">更换图片</button> <div style="width: 320px;height: 320px;border: solid 1px #555;padding: 5px;margin-top: 10px"> <img id="finalImg" src="" width="100%"> </div> <!--图片裁剪框 start--> <div style="display: none" class="tailoring-container"> <div class="black-cloth" onclick="closeTailor(this)"></div> <div class="tailoring-content"> <div class="tailoring-content-one"> <label title="上传图片" for="chooseImg" class="l-btn choose-btn"> <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)"> 选择图片 </label> <div class="close-tailoring" onclick="closeTailor(this)">×</div> </div> <div class="tailoring-content-two"> <div class="tailoring-box-parcel"> <img id="tailoringImg"> </div> <div class="preview-box-parcel"> <p>图片预览：</p> <div class="square previewImg"></div> <div class="circular previewImg"></div> </div> </div> <div class="tailoring-content-three"> <button class="l-btn cropper-reset-btn">复位</button> <button class="l-btn cropper-rotate-btn">旋转</button> <button class="l-btn cropper-scaleX-btn">换向</button> <button class="l-btn sureCut" id="sureCut">确定</button> </div> </div> </div> <!--图片裁剪框 end--> <script> //弹出框水平垂直居中 (window.onresize = function () { var win_height = $(window).height(); var win_width = $(window).width(); if (win_width <= 768){ $(".tailoring-content").css({ "top": (win_height - $(".tailoring-content").outerHeight())/2, "left": 0 }); }else{ $(".tailoring-content").css({ "top": (win_height - $(".tailoring-content").outerHeight())/2, "left": (win_width - $(".tailoring-content").outerWidth())/2 }); } })(); //弹出图片裁剪框 $("#replaceImg").on("click",function () { $(".tailoring-container").toggle(); }); //图像上传 function selectImg(file) { if (!file.files || !file.files[0]){ return; } var reader = new FileReader(); reader.onload = function (evt) { var replaceSrc = evt.target.result; //更换cropper的图片 $(‘#tailoringImg‘).cropper(‘replace‘, replaceSrc,false);//默认false，适应高度，不失真 } reader.readAsDataURL(file.files[0]); } //cropper图片裁剪 $(‘#tailoringImg‘).cropper({ aspectRatio: 1/1,//默认比例 preview: ‘.previewImg‘,//预览视图 guides: false, //裁剪框的虚线(九宫格) autoCropArea: 0.5, //0-1之间的数值，定义自动剪裁区域的大小，默认0.8 movable: false, //是否允许移动图片 dragCrop: true, //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域 movable: true, //是否允许移动剪裁框 resizable: true, //是否允许改变裁剪框的大小 zoomable: false, //是否允许缩放图片大小 mouseWheelZoom: false, //是否允许通过鼠标滚轮来缩放图片 touchDragZoom: true, //是否允许通过触摸移动来缩放图片 rotatable: true, //是否允许旋转图片 crop: function(e) { // 输出结果数据裁剪图像。 } }); //旋转 $(".cropper-rotate-btn").on("click",function () { $(‘#tailoringImg‘).cropper("rotate", 45); }); //复位 $(".cropper-reset-btn").on("click",function () { $(‘#tailoringImg‘).cropper("reset"); }); //换向 var flagX = true; $(".cropper-scaleX-btn").on("click",function () { if(flagX){ $(‘#tailoringImg‘).cropper("scaleX", -1); flagX = false; }else{ $(‘#tailoringImg‘).cropper("scaleX", 1); flagX = true; } flagX != flagX; }); //裁剪后的处理 $("#sureCut").on("click",function () { if ($("#tailoringImg").attr("src") == null ){ return false; }else{ var cas = $(‘#tailoringImg‘).cropper(‘getCroppedCanvas‘);//获取被裁剪后的canvas var base64url = cas.toDataURL(‘image/png‘); //转换为base64地址形式 //$("#finalImg").prop("src",base64url);//显示为图片的形式 uploadFile(base64url) //关闭裁剪框 closeTailor(); } }); //关闭裁剪框 function closeTailor() { $(".tailoring-container").toggle(); } //ajax请求上传 function uploadFile(file) { $.ajax({ url : ‘uploadCropImage.action‘, type : ‘POST‘, data: { ‘file‘: file,‘savePath‘:savePath }, dataType: "json", success : function(data) { if (data.issuccess) { console.log(data.path) }else { alertShow("图片上传失败") } } }); } </script> </body> </html>
后端处理：
public String uploadCropImage() throws IOException { PrintWriter printWriter = null; JSONObject result = new JSONObject(); HttpServletRequest request = this.getRequest(); HttpServletResponse reqponse = this.getResponse(); String file = request.getParameter("file"); String savePath = request.getParameter("savePath").trim(); FileOutputStream out = null; BASE64Decoder decoder = new BASE64Decoder(); // 去掉base64编码的头部 如："data:image/jpeg;base64," 如果不去，转换的图片不可以查看 file = file.substring(22); //解码 try { printWriter = reqponse.getWriter(); reqponse.setCharacterEncoding("utf-8"); //根目录 String icPath = HelperUtil.getStoreAddress("IC_PATH"); String imgPath = icPath + savePath; //判断文件目录是否存在（不存在就创建） File file1 = new File(imgPath); if (!file1.exists()) { file1.mkdir(); } String name = new Date().getTime() + ".jpg"; result.put("path", savePath+name); String path = file1.getPath()+File.separator + name; out = new FileOutputStream(path); // 输出文件路径 // Base64解码 byte[] b = decoder.decodeBuffer(file); for (int i = 0; i < b.length; ++i) { if (b[i] < 0) {// 调整异常数据 b[i] += 256; } } out.write(b); result.put("issuccess", true); } catch (FileNotFoundException e) { e.printStackTrace(); result.put("issuccess", false); } catch (IOException e) { e.printStackTrace(); result.put("issuccess", false); } finally { out.flush(); out.close(); } printWriter.print(result); printWriter.flush(); printWriter.close(); return null; }
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.13</version>
</dependency>