个人博客

2021年5月8日：

上次完善了拦截器功能，这次按照视频里的讲解把cropper的视频看了一遍，头像修改虽然有时还有bug，比如第一次点击可能出现cropper不能显示的问题，但是功能相比之前能完美运行了，原因在于我少加了个js文件，

<script
src="${pageContext.request.contextPath}/statics/plugins/cropper/jquery-cropper.js"></script>

这个js文件是将jquery和cropper结合起来的文件，只有引用了这个文件才能运行cropper里的js代码，以下是我的代码：

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<jsp:include page="/index_head.jsp">
<jsp:param name="title" value="头像修改" />
<jsp:param name="needCropper" value="true" />
</jsp:include>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>
头像修改 <small>different form elements</small>
</h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<input style="padding-bottom: 5px;" type="file" id="fileHead"
onchange="show(this)" />
<button type="button" class="btn btn-success"
onclick="$('#imgTeset').cropper('setDragMode','move')">移动</button>
<button type="button" class="btn btn-success" onclick="horizontal()">水平翻转</button>
<button type="button" class="btn btn-success" onclick="vertical()">垂直翻转</button>
<button type="button" class="btn btn-success" onclick="cai()">裁剪</button>
<div style="width: 600px; height: 600px;">
<img id="imgTeset" src="">
</div>
</div>
</div>
</div>
<jsp:include page="/index_foot.jsp">
<jsp:param name="needCropper" value="true" />
</jsp:include>
<script type="text/javascript">
function show(a) {
var $file = $(a);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL = null;
if (!fileObj || !fileObj.files || !fileObj.files[0]) {//没有选择图片
return;
}
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$("#imgTeset").attr('src', dataURL);
$('#imgTeset').cropper({
aspectRatio : 1 / 1,
viewMode : 1
});
$("#imgTeset").cropper('replace', dataURL);
}
var currentHorizontal = 1;
var currentVertical = 1;

function horizontal() {
currentHorizontal *= -1;
$('#imgTeset').cropper('scaleX', currentHorizontal);
}

function vertical() {
currentVertical *= -1;
$('#imgTeset').cropper('scaleY', currentVertical);
}
function cai() {
var size = {
width : 128,
height : 128
};
var cas = $('#imgTeset').cropper('getCroppedCanvas', size);
if (cas == null || cas.tagName == null) {
alert("请选择图片");
return false;
} else {
var base64url = cas.toDataURL('image/jpeg');

$.ajax({
url : "${pageContext.request.contextPath}/user/cropper1",
dataType : 'text',
type : "post",
data : {
imgBase64 : base64url
},
success : function(data) {
alert(data);
if (data.indexOf("成功") >= 0) {
window.location = "${pageContext.request.contextPath}/index.jsp";
}
}
});
}
}
</script>

后端代码：

@ResponseBody
@RequestMapping(value = "/cropper1", produces = "application/json;charset=utf-8")
public String cropper1(String imgBase64, HttpSession session, @SessionAttribute("user") User user) {
imgBase64 = imgBase64.split(",")[1];
String path = session.getServletContext().getRealPath("statics/images/user");
String imgPath = userService.uploadHead(user.getId(), user.getTrue_name(), user.getClub_count(),
user.getStatus(), imgBase64, path);
user.setHead_img(imgPath);
session.setAttribute("user", user);
return "头像修改成功";
}

这是一个用ajax发起的请求，主要原理在于cropper将图片转成base64格式的数据，然后以字符串的格式发给后端，后端接收后调用服务层的uploadHead方法，将图片的路径和数据以及一些其他的基本信息发给服务层，服务层接收后就会执行这个函数：

@Transactional
public String uploadHead(Long id, String name,int count, int status, String imgBase64, String path) {
File a = new File(path);
if (!a.exists()) {
a.mkdir();
}
try {
byte[] decode3 = Base64.decodeBase64(imgBase64);
FileOutputStream out = new FileOutputStream(path + "/" + name + ".jpg");
out.write(decode3);
out.close();
User user = new User();
user.setId(id);
user.setTrue_name(name);
user.setClub_count(count);
user.setStatus(status);
String imgPath = name + ".jpg";
user.setHead_img(imgPath);
userDao.update(user);
return imgPath;
} catch (UnsupportedEncodingException e) {
return null;
} catch (IOException e) {
return null;
}
}

这个函数能将数据解码然后把图片存到磁盘里利用，总的来说，修改头像花了我不少时间来做，因为在做的时候经常出现bug，不过大多已经解决了，虽然已经不知道怎么解决的，但还是很欣慰最后能运行。