基于HTML5头像截切上传

基于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();

    }
}

没有更多推荐了,返回首页