刚完成的一个上传头像模块，望指点（含详细代码）

标签：

　　file API，直接读取本地文件。fileAPI和JCrop的结合使用上传头像。

　　1、html部分

　　<input id="demo" type="file" name="file" onchange="showPic();"/>

　　<img id="avatar" src="" style="width:200px">

　　2、fileAPI预览图片

　　<script type="text/javascript">

　　function showPic(){

　　　　var file = $(‘#demo‘)[0].files[0];

　　　　var reader = new FileReader();

　　　　reader.onload = function(){//加载成功后会触发。reader.onloadend加载成功或失败都会触发

　　　　　　$(‘#avatar‘).attr(‘src‘,reader.result);

　　　　}

　　　　reader.readAsDataURL(file);

　　}

　　</script>

　　3、JCrop截取图片工具

　　<link rel="stylesheet" href="./JCrop/css/jquery.Jcrop.css" />

　　<script src="./jquery-1.8.3.min.js" type="text/javascript"></script>

　　//项目本身1.11有点问题，项目版本不支持，在下面再引用一遍1.8.2把之前版本覆盖，我试着是可以

　　<script type="text/javascript" src="./JCrop/js/jquery.JCrop.min.js"></script>

　　<script type="text/javascript">

　　var Jcrop_api;

　　function showPic(){

　　　　var file = $(‘#demo‘)[0].files[0];

　　　　var reader = new FileReader();

　　　　reader.onloadend = function(){

　　　　　　$(‘#avatar‘).attr(‘src‘,reader.result);

　　　　}

　　　　reader.readAsDataURL(file);

　　　　var Jcrop_api = $.Jcrop($("#avatar"),{//初始化JCrop

　　　　　　aspectRatio : 1 , //设置截图为正方形

　　　　　　onChange: showCoords,//

　　　　　　onSelect: showCoords

　　　　});

　　}

　　function showCoords(coords){//预览裁剪效果,没详细写

　　　　console.log(coords);//截图信息

　　}

　　</script>

　　4、将图片和截取数据传往后台处理

　　Jcrop的getScaleFactor()方法可以获取图片缩放比例[w,h]。但是我获取的一直是1：1，干脆不用了。

　　往后台传数据用到两个东西，一个是formData，一个是xmlHttpRequest.

　　var formData = new FormData;

　　formData.append(‘file‘,$(‘#demo‘)[0].files[0]);

　　formData.append(‘x‘,Jcrop_api.tellScaled().x);

　　formData.append(‘y‘,Jcrop_api.tellScaled().y);

　　formData.append(‘w‘,Jcrop_api.tellScaled().w);

　　formData.append(‘h‘,Jcrop_api.tellScaled().h);//以上xywh四个值用来剪裁小图用的

　　formData.append(‘showHeight‘,$(‘#avatar‘).style.height);//图片在页面的显示高度传到后台，用来计算图片的缩放比例

　　xmlhttp = new XMLHttpRequest();

　　xmlhttp.open("POST",url,true);

　　xmlhttp.send();//就是一个ajax

　　5、后台处理

　　后台spring接收，用BufferedImage进行剪裁

　　public void setAvatar(MultipartFile file,Integer x,Integer y,Integer w,Integer h,Integer showHeight){

　　　　try {

　　　　　　String suffix = file.getOriginalFilename().split(".")[file.getOriginalFilename().split(".").length-1];

　　　　　　String avatarPath = "D:\\file\\"+UUID.randomUUID().toString().replaceAll("_","")+"."+suffix;

　　　　　　BufferedImage bi = ImageIO.read(file.getInputStream());

　　　　　　BigDecimal realHeight = new BigDecimal(bi.getHeight()+"");

　　　　　　BigDecimal ratio = realHeight.divide(new BigDecimal(showHeight+""));

　　　　　　x = ratio.multiply(new BigDecimal(x)).intValue();

　　　　　　y = ratio.multiply(new BigDecimal(y)).intValue();

　　　　　　w = ratio.multiply(new BigDecimal(w)).intValue();

　　　　　　h = ratio.multiply(new BigDecimal(h)).intValue();

　　　　　　BufferedImage newBi = bi.getSubimage(x, y, w, h);

　　　　　　ImageIO.write(newBi, suffix, new File(avatarPath));

　　　　　　/*

　　　　　　*将可访问的头像文件路径赋值给用户实体

　　　　　　*/

　　　　　　return "success";

　　　　} catch (Exception e) {

　　　　　　e.printStackTrace();

　　　　　　return "error";

　　　　}

　　}

　　6、遇到的问题

　　页面在JS动态改变img的src属性后，img的宽度有时不能自适应（有时可以，有时不可以）。导致图片被拉伸变形，剪裁结果不准确。

　　7、附Jcrop API

　　参数：

　　方法：

刚完成的一个上传头像模块，望指点（含详细代码）

标签：

原文地址：http://www.cnblogs.com/dwding/p/5475998.html