date: 2017/4/10 16:17:25
tags:
- Jcrop
- 预览裁剪上传头像
最近用了Jcrop实现了一个上传头像的功能，在这里记录一下，也希望能帮助到有需要的朋友。
对IE兼容性尚可，IE8和IE9不支持裁剪和预览，IE9以上可正常使用。
直接上源码:https://github.com/iftom/springmvcdemo_jcrop
下面是最终效果图:
下面是一个说明书式的介绍，按照我的步骤一步步走下去，功能就可以实现。
上传头像本身没有什么难点，但是加入了裁剪和预览功能，涉及的前端问题比较多，我途中也踩了许多坑，如果你想快速见到效果，消除对一件未知的事情的焦虑的话，我建议你先把源码下载下来，放到Tomcat里跑起来，看到真实的效果后，再着手开始写自己的代码。
详细的原理内容将来会更新。
<strong>第零步------开始前的准备</strong>
在开始这个Demo之前，你必须已经具备以下条件:
- 可以正常访问的SpringMVC或者SpringBoot项目
- 确保你的项目可以接受文件上传,具体的配置可以参考代码内的mvc-dispatcher-servlet.xml文件的末尾
- 一个上传头像的HTML原型页面，如果没有可以参考代码内的页面
- Jcrop的使用方式可参考代码内的写法，但是还请你仔细阅读Jcrop官方的Demo和文档
<strong>第一步------下载Jcrop相关文件</strong>
登录Jcrop官网，下载最新的Jcrop版本(目前是v0.9.12)。
Jcrop的官网访问速度可能很慢，不过一定能够打开，加载的时候可以看看这个线上的中文版的Demo。
下载完后，把相关的css、js文件放到你的项目内并且在页面上引入即可。
别忘了还有一张名为jcrop.gif的图片。
<strong>第二步------编写前端页面</strong>
完整代码请参考personalPhoto.jsp，这里只对几个关键点说明一下。
1.因为各大浏览器的文件框的样式不同，所以页面上很少用到原生的<input type="file"/>来当做上传文件的按钮。而是把原生的文件框设置为透明（注意不是hidden隐藏），并且将其覆盖在另一个普通的button按钮上来完成样式的统一。
file按钮透明的css样式:
#fcupload{ opacity:0;/* 透明，非IE */ filter:alpha(opacity=0);/* 透明，IE*/ position: absolute; top:123px; width:135px; font-size:29px; }
你可以通过top和left来调节file按钮的位置，通过font-size来设置file按钮的大小.
下面是两张对比图来直观的感受效果:
2.如果你需要添加多个预览图，请参考uploadUserPhoto.css文件和personalPhoto.jsp页面中的id的前缀为preview-pane的几个标签。
<strong>第三步------编写后端代码</strong>
完整代码参考MainController.java
1.除了对图片的大小和后缀名的验证之外，你还需要验证图片是否是一张真正的图片，而不是手动改过后缀名的一张伪造的图片。方法是通过JAVA代码获取图片的宽高，如果不能获取到，则认为这是一张非法的图片。代码参考FileUploadUtil.java。（即使是一张真正的图片，依然可以嵌入非法的代码，这里没有做更多的处理，日后更新。）
2.对图片的裁剪，如果你没有时间研究，直接复制ImgCut.java当做工具类使用即可。
3.为了方便Demo的展示，我把上传的图片的地址写入了config.properties文件内，请根据自己实际情况修改存储图片地址的方式。
<strong>IE兼容性</strong>
- IE8和IE9对文件上传支持不太友好，必须将
工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径 打开，浏览器才能取到本地图片的路径。
<br />
如果你遇到了什么问题，欢迎联系我，微信:15233639789
我的Hexo博客:http://wangxiaoyu.date
