cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用。
cropper有两种方式上传截取的图片数据，一种是前端把裁剪的数据传到后台进行裁剪后保存，第二种是前端拿到剪裁后的数据，转成base64后上传， 后台通过二进制流上传图片信息。这里采用的是第二种方法。
开始
1、结构
cropper.css 裁剪插件（没改过）
cropper.js 裁剪插件（没改过）
index.html 裁剪页面
jquery.min.js
test.png 测试图片
ImgController.java 接收前端上来的base64，并保存图片
2、代码
代码如下，拷贝就可以直接用。
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="cropper.css" rel="stylesheet">
<style type="text/css">
.container {
width: 400px;
height:400px;
}
</style>
</head>
<body>
<div class="container">
<img id="image" src="test.png">
</div>
<button type="button" onclick="uploadCropImg()">生成</button>
<script src="jquery.min.js"></script>
<script src="cropper.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('.container > img').cropper({
aspectRatio: 16 / 9,//截图比例
crop: function(data) {
// 出来裁切后的图片数据.
}
});
});
/* 上传裁剪之后的图片 **/
function uploadCropImg(){
var $image = $("#image");
var src = $image.eq(0).attr("src");
var canvasdata = $image.cropper("getCanvasData");
var cropBoxData = $image.cropper('getCropBoxData');
convertToData(src, canvasdata, cropBoxData, function (imgBase64Str){
imgBase64Str = imgBase64Str.replace("data:image/jpeg;base64," , "");
imgBase64Str = imgBase64Str.replace("data:image/png;base64," , "");
$.ajax({
type: "post",
url: "/项目名/imgCon/uploadCropImg.do",
data: {
imgBase64Str : imgBase64Str
},
success: function(data) {
if(data == "success"){
window.opener.cropImgSuccess();
}else{
alert("上传失败");
}
},error: function(request) {
alert("上传失败");
}
});
})
}
/* 把裁剪完之后的图片转成base64字符串 **/
function convertToData(url, canvasdata, cropdata, callback) {
var cropw = cropdata.width; // 剪切的宽
var croph = cropdata.height; // 剪切的宽
var imgw = canvasdata.width; // 图片缩放或则放大后的高
var imgh = canvasdata.height; // 图片缩放或则放大后的高
var poleft = canvasdata.left - cropdata.left; // canvas定位图片的左边位置
var potop = canvasdata.top - cropdata.top; // canvas定位图片的上边位置
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
canvas.width = cropw;
canvas.height = croph;
var img = new Image();
img.src = url;
img.onload = function() {
this.width = imgw;
this.height = imgh;
// 这里主要是懂得canvas与图片的裁剪之间的关系位置
ctx.drawImage(this, poleft, potop, this.width, this.height);
var base64 = canvas.toDataURL('image/jpg', 1); // 这里的“1”是指的是处理图片的清晰度（0-1）之间，当然越小图片越模糊，处理后的图片大小也就越小
callback && callback(base64) // 回调base64字符串
}
}
</script>
</body>
</html>java代码:
package com.xwtec.controller;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import sun.misc.BASE64Decoder;
@Controller
@Scope("prototype")
@RequestMapping("/imgCon")
public class ImgController {
@RequestMapping(value = "/uploadCropImg.do", method=RequestMethod.POST)
public void uploadCropImg(HttpServletRequest request, HttpServletResponse response ,
@RequestParam(required=true) String imgBase64Str) throws IOException{
boolean flag = generateImage(imgBase64Str, "d://hhh.png");
if(flag){
response.getWriter().write("success");
}else{
response.getWriter().write("default");
}
}
public static boolean generateImage(String imgStr, String path) {
if (imgStr == null)
return false;
BASE64Decoder decoder = new BASE64Decoder();
try {
byte[] b = decoder.decodeBuffer(imgStr);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {
b[i] += 256;
}
}
OutputStream out = new FileOutputStream(path);
out.write(b);
out.flush();
out.close();
return true;
} catch (Exception e) {
return false;
}
}
}
项目启动后，在html页面点击生成就可以保存图片，我这里是保存到D盘目录下。
结束
结尾:仅供自己学习,记录问题和参考,若有带来误解和不便请见谅,共勉！