jcrop java_JAVA spring+jcrop.js实现简单的头像剪裁

项目需求有个功能要实现头像，让我这个后端开发来做这个确实有点为难，结合网上大神的例子，做了个简单的功能，以备不时之需

实现效果

image.png

页面+js

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

response.setHeader("Pragma","No-cache");

response.setHeader("Cache-Control","no-cache");

%>

My JSP 'face.jsp' starting page

static/css/bootstrap.css"/> --%>

/* jcrop对象，全局变量方便操作 */

var api = null;

/* 原图宽度 */

var boundx;

/* 原图高度 */

var boundy;

/* 选择图片事件 */

function readURL(URL){

var reader = new FileReader();

reader.readAsDataURL(URL.files[0]);

reader.onload = function(e){

$("#faceId").removeAttr("src");

$("#lookId").removeAttr("src");

$("#faceId").attr("src",e.target.result);

$("#lookId").attr("src",e.target.result);

$("#faceId").Jcrop({

onChange: showPreview,

onSelect: showPreview,

aspectRatio: 1,

boxWidth:600

},function(){

// Use the API to get the real image size

//使用API来获得真实的图像大小

var bounds = this.getBounds();

boundx = bounds[0];

boundy = bounds[1];

// Store the API in the jcrop_api variable

//jcrop_api变量中存储API

api = this;

$("#boundx").val(boundx);

$("#boundy").val(boundy);<