您的位置：首页 > Web前端 > HTML5

基于HTML5头像截切上传

2017-03-30 11:29 573 查看

基于HTML5头像截切上传

先看效果：

实现的原理就是使用了html5提供的fileReader读取了本地系统的文件，然后使用画布渲染出来，可以点击缩小放大，当点击截切时就截取画布里的图片数据，详细了解可以查看cropbox.js里的实现，这个截切之后可以拿到的是base64后的字符串，可以把这个字符串传给后台，然后在后台再用base64反解码，然后就拿到了byte[], 然后再输出为文件保存在服务器上就实现了上传功能。代码如下：

前端：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery新浪微博头像裁切预览代码</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/cropbox.js"></script>
<div class="container">
<div class="imageBox">
<div class="thumbBox"></div>
<div class="spinner" style="display: none">Loading...</div>
</div>
<div class="action">
<!-- <input type="file" id="file" style=" width: 200px">-->
<div class="new-contentarea tc"> <a href="javascript:void(0)" class="upload-img">
<label for="upload-file">上传图像</label>
</a>
<input type="file" class="" name="upload-file" id="upload-file" />
</div>
<input type="button" id="btnCrop"  class="Btnsty_peyton" value="裁切">
<input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >
<input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
<input type="button" id="btnSave" class="Btnsty_peyton" value="save" >
</div>
<div class="cropped"></div>
</div>
<script type="text/javascript">
$(window).load(function() {
var options =
{
thumbBox: '.thumbBox',
spinner: '.spinner',
imgSrc: 'images/avatar.png'
}
var cropper = $('.imageBox').cropbox(options);
$('#upload-file').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
options.imgSrc = e.target.result;
cropper = $('.imageBox').cropbox(options);
}
reader.readAsDataURL(this.files[0]);
this.files = [];
})
$('#btnCrop').on('click', function () {
var img = cropper.getDataURL();
$('.cropped').html('');
$('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
$('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
$('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
})
$('#btnZoomIn').on('click', function () {
cropper.zoomIn();
})
$('#btnZoomOut').on('click', function () {
cropper.zoomOut();
})
$('#btnSave').on('click', function(){
$.post('/upload',{'imageData':cropper.getDataURL()});
})
});
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

后端的代码：

@WebServlet(name = "uploadServlet", urlPatterns = "/upload")
public class UploadServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
super.doGet(req, resp);
}

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

String imageData = req.getParameter("imageData");
imageData = imageData.replace("data:image/png;base64,", "");
byte[] imageByte = Base64.getDecoder().decode(imageData.getBytes());
OutputStream fos = new FileOutputStream(new File("E:/test.png"));
fos.write(imageByte);
fos.close();

}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 头像上传 html5

相关文章推荐

新的分享

章节导航