现在这数字时代，手机拍照片儿很方便！但上传图片可真是麻烦，上传慢得像爬虫似的。不过没关系，今儿教你们一招特好用的技巧——用SpringMVC和localResizeIMG框架，这样在H5上压缩传图就简单又快速！
为什么我们需要图片压缩
手机拍的照片太大了，传上去要花好多时间和消耗服务器资源；特别是在网速慢的时候，上传照片真的很烦人。弄个图片压缩就搞定了那样既不破坏图片质量，又能让图片体积变小，上传起来飞快，用的人也舒服多。
localResizeIMG是什么
LocalResizeIMG是部好用的JavaScript工具包！它能帮你在客户端（也就是我们常用的浏览器里）提前把照片压小。这样子，不论是用Wi-Fi还是用手机流量传图，速度都会大大加快。关键在于，用户们完全感知不到变化，毫无操作难度喔！
如何下载和导入localResizeIMG
首先，去GitHub下个localResizeIMG。安好了之后，把里面的dist文件夹丢到你的网页开发工具里的js文件夹那里；然后，把jQuery和localResizeIMG也加进来，搞定！
配置上传input框的onchange事件
"> ">
要让上传图片提前被压缩，只需要在input框的file类型加个onchange事件就行了。用户选好图后，它就会触发，然后你就能在对应的方法里写代码压缩图片。关键就是要用localResizeIMG来裁剪图片，把压缩过的用base64格式传到服务器那边。
SpringMVC后台如何处理base64图片
搞定SpringMVC后的关键步骤就是要写个控制器来接收浏览器发送过来的base64图片信息。别怕，按照我们说的做，把这些信息变成真的图片，存到我们的服务器就行了。虽然看起来吓人，但只要照着我们的步骤来，绝对没问题！
实战案例演示
我来给你们讲个实战案子，这样你们就能更容易搞懂怎么做！首先，我们要搞定localResizeIMG的设置；然后就是前后端代码写下来，最后再进行整体流程测试。这么一搞，你就能轻松玩转H5图片压缩上传功能！
注意事项与常见问题解答
function fileChange(that){
var filepath=$(that).val();
if(filepath=="")
{
return;
}
var extStart=filepath.lastIndexOf(".");
var ext=filepath.substring(extStart,filepath.length).toUpperCase();
if(".jpg|.png|.bmp|.jpeg".toUpperCase().indexOf(ext.toUpperCase())==-1){
alert("只允许上传jpg、png、bmp、jpeg格式的图片");
return false;
}
//以图片宽度为800进行压缩
lrz(that.files[0], {
width: 800
})
.then(function (rst) {
//压缩后异步上传
$.ajax({
url : "/common/fileUploadPicture",
type: "POST",
data : {
imgdata:rst.base64//压缩后的base值
},
dataType:"json",
cache:false,
async:false,
success : function(data) {
if(data.success)
{
alert(data.message);///data.message为上传成功后的文件路径
}else{
alert(data.message);///data.message为上传失败原因
}
},
error : function(){
alert("上传失败");
}
});
});
}
用localResizeIMG压缩上传图片时，记住这几件事很关键！像怎么保证压缩过的图片依然清晰，还有如何搞定格式不对的问题等等。当然，我会解答你们在实际操作中可能遇到的各种疑问，让你轻松搞定这个项目哈。
总结与进一步探索
今天学到了怎么用SpringMVC和localResizeIMG搞H5上的图片缩放，还知道了这中间不少门道！希望下次碰到这种事儿，大伙儿都能轻松应对~
现在，我想问问大家：你们在搞项目的过程中有没有遇到过图片上传的困扰？你们都是咋搞定的？快来评论里说说看，咱们可以互相学习。另外，如果你觉得这篇文章有点用，别忘了赞和分享，让更多朋友加入到讨论中来！
import sun.misc.BASE64Decoder;//导入的base64的类
/**
* 文件上传
*/
@ResponseBody
@RequestMapping("common/fileUploadPicture")
public Object fileUploadPicture(String imgdata, HttpServletRequest request) {
LOGGER.info("[文件上传（fileUploadPicture）][params:imgdata=" + imgdata + "]");
BASE64Decoder decoder = new BASE64Decoder();
try {
String basePath = request.getRealPath("/upload_files");
string imgPath=basePath+"/test.jpg";
// new一个文件对象用来保存图片，默认保存当前工程根目录
File imageFile = new File(imgPath);
// 创建输出流
FileOutputStream outputStream = new FileOutputStream(imageFile);
// 获得一个图片文件流，我这里是从flex中传过来的
byte[] result = decoder.decodeBuffer(imgdata.split(",")[1]);//解码
for (int i = 0; i Result类：
import java.io.Serializable;
public class Result implements Serializable{
private static final long serialVersionUID = 1L;
private boolean success;
private String message;
public Result() {
success = true;
}
public Result(boolean success, String message) {
this.success = success;
this.message = message;
}
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
@Override
public String toString() {
return "Result [success=" + success + ", message=" + message + "]";
}
}
原文链接：https://www.icz.com/technicalinformation/web/2024/06/18449.html，转载请注明出处~~~ 
评论0