[前端]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 () {
            document.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);
                });

未完待续，歇歇回来写。