[前端]LocalResizeImg的使用技巧、与Struts2的结合以及一些坑点

LocalResizeImg是一款功能十分强大且简单易用的前端图片压缩插件。基本兼容绝大多数现代浏览器（包括pc端和移动端）。它的主要功能就是在浏览器前端对图片进行压缩，之后可以选择上传服务器端或者用于缩略图显示等，这样可以大大缩减数据传输流量，非常适合移动端使用。

我先说说优点：

最大的优点就是简单易用，对于LocalResizeImg4，现在只需：

（1）在前端页面导入lrz.bundle.js，如果不保险可以导入lrz.all.bundle.js（这个js文件包含了安卓与ios的依赖）。

（2）在<script></script>使用以下语法：

lrz(this.files[0], {width: 1024})
.then(function (rst) {

// 进行处理
})

下面我说说具体用法

1、页面中导入<script src="./dist/lrz.bundle.js"></script>

2、html：<input type="file" capture="camera" accept="image/*" name="img" id="img">
capture="camera"的意思是接受拍照
accept="image/*"的意思是文件只接受图片格式，具体什么格式可以设置例如image/jpeg

3、在script中调用lrz()函数（支持原生js以及jquery）

最长见得就是change事件调用。

$("#img").change(function(){

lrz(this.files[0],{width:600}).then(function(rst){

})
});

lrz()函数中第一个参数很显然是文件，第二个参数是设置压缩后的图片参数，width：600就是压缩后最大宽度为600px。当然还能设置压缩质量0~1，数越大质量越高，默认0.7。除第一个文件参数外，其余参数都是可选参数。

lrz（）函数返回一个Promise类型的对象。因此看上面的例子就要用promise类型的特性来看。p.s.我也不是很懂promise类型所以大家仅供参考。

promise类型的一大特点就是异步、链式结构.then() .catch()等

因此上面这个例子应该是lrz() ， 然后返回的promise对象.then()操作。因为是这种结构所以支持.then().then()…catch()。当然，需要适当变动。

其中：

.then(function(rst){

rst.base64;
//其中的rst是一个带着压缩后图片base48格式字符的数据。可以用rst进行操作，base48格式的用途请自行谷歌
})

参数

lrz(file, [options]);
file 通过 input:file 得到的文件，或者直接传入图片路径

[options] 这个参数允许忽略
width {Number} 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。
height {Number} 同上
quality {Number} 图片压缩质量，取值 0 - 1，默认为0.7
fieldName {String} 后端接收的字段名，默认：file

返回结果

返回值是一个promise对象

then(rst)
rst.formData 后端可处理的数据
rst.file 压缩后的file对象（默认已经丢在rst.formData有一份了），需要注意的是如果压缩率太低的话，这个会是原始的file对象
rst.fileLen 生成后的图片的大小，后端可以通过此值来校验是否传输完整
rst.base64 生成后的图片base64，后端可以处理此字符串为图片，也直接用于img.src = base64
rst.base64Len 生成后的base64的大小，后端可以通过此值来校验是否传输完整 (如果采用base64上传方式)
rst.origin 也就是原始的file对象，里面存了一些原始文件的信息，例如大小，日期等。

catch(err)

always()

rst介绍：

{origin: File, base64: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD…iigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/Z", base64Len: 1507}

origin: File
lastModified: 1442482311173
lastModifiedDate: Thu Sep 17 2015 17:31:51 GMT+0800 (中国标准时间)
name: "upload-add.png"
size: 291
type: "image/png"
webkitRelativePath: ""

下面附一个完整的例子：（对用法说的更好地是：http://www.cnblogs.com/52fhy/p/5355601.html这篇博文）

原生js：

document.querySelector('input').addEventListener('change', function () {
// this.files[0] 是用户选择的文件
lrz(this.files[0], {width: 1024})
.then(function (rst) {

// 把处理的好的图片给用户看看呗（可选）
var img = new Image();
img.src = rst.base64; //base64字符串可用于img标签的src，可直接显示

img.onload = function () {
docu
4000
ment.body.appendChild(img);
};

return rst;//链式.then()的话注意需要在前面一个.then()里return rst供后面的使用（我是这么认为的）
})

.then(function (rst) {       //链式.then
// 这里该上传给后端啦

/* ==================================================== */
// 原生ajax上传代码，所以看起来特别多，但绝对能用
// 其他框架，例如jQuery处理formData略有不同，请自行google，baidu。
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:5000/');

xhr.onload = function () {
if (xhr.status === 200) {
// 上传成功
} else {
// 处理其他情况
}
};

xhr.onerror = function () {
// 处理错误
};

xhr.upload.onprogress = function (e) {
// 上传进度
var percentComplete = ((e.loaded / e.total) || 0) * 100;
};

// 添加参数
rst.formData.append('fileLen', rst.fileLen);
rst.formData.append('xxx', '我是其他参数');

// 触发上传
xhr.send(rst.formData);
/* ==================================================== */

return rst;
})

.catch(function (err) {
// 万一出错了，这里可以捕捉到错误信息
// 而且以上的then都不会执行

alert(err);
})

.always(function () {
// 不管是成功失败，这里都会执行
});
});

下面来说说坑

在各大博文中对LocalResizeImg使用都没有提到：

1、多图片如何压缩
2、多图片压缩后如何上传（各种博文中都只提到了单图片无刷新ajax上传）
3、后端如何接收前端传来的数据，无论是rst.formData还是base64都没说怎么办。

对于第三点，php是可以$_POST[‘键’] 来获得base64字符串的。springmvc好像用注释的方法也可以获得传来的base64。但是我使用的struts2如论是getPar…..(“关键字”)还是自动匹配javaBean都取不到base64。

即便前端不发送rst.base64，理论上来讲如果前端上传rst.formData的话formData对象也是可以取到值的，然而还是不行。

所以针对后端无法接收这一点，我来说说我的解决方法（并不一定就好），这个解决方法同时解决了问题（1）的多图片如何压缩。

在说解决方法之前得先说说这些坑为什么会出现。不想看原因的可以直接跳到解决方法那里。

关于坑点的原因都是我自己的理解，欢迎指正

出现多图片如何压缩等问题的最大原因就是前文中提到的Promise类型特性：异步。

function(){

alert(1);

lrz(file).then(function(rst){

alert(2);
});

alert(3);
}

上面这个方法运行完结果是：

1
3
2

的顺序显示的。据我的测试，lrz()永远都会在整个方法的最后完成。

并且由于异步特性

即便是var obj = lrz(file).then(function(rst){

alert(2);
});

未完待续，歇歇回来写。