移动端使用localResizeIMG4压缩图片

本文将介绍如何使用 localResizeIMG4 库对移动端进行图片压缩。localResizeIMG4 是一个适用于移动设备的图片压缩库，它支持压缩多图片、获取压缩后的图片、支持压缩进度回调等功能。本文的操作需要一定的前端开发知识。

安装 localResizeIMG4

首先，我们需要下载 localResizeIMG4 库，可以从官网（http://exin.github.io/localResizeIMG4/）或者 Github（https://github.com/exin/localResizeIMG）下载。

直接引入压缩库静态文件 localResizeIMG.min.js 即可。

<script src="/path/localResizeIMG.min.js"></script>

使用 localResizeIMG4 压缩图片

压缩单张图片

待压缩的图片的 DOM 元素必须具有 src 属性，如下：

<img src="test.jpg" id="img">

在 JS 代码中，我们使用 localResizeIMG 函数压缩图片方法，如下：

var imgObj = document.getElementById('img');
localResizeIMG(imgObj, {
    width: 800,
    quality: 0.7,
    success: function (result) {
        console.log(result);
    }
});

localResizeIMG 函数有两个参数：

• imgObj：需要压缩的图片 DOM 元素，
• options: 配置参数，其中最关键的是 width 和 quality。

上述代码中，我们设置了图片压缩后的宽度为 800px，图片质量为 0.7，success 属性的回调函数将返回一个经过压缩处理后的 base64 编码的图片数据。

压缩多张图片

压缩多张图片时，需要将所有待处理的图片 DOM 及配置参数封装到一个数组中，以进行统一处理。示例代码如下：

var imgList = document.querySelectorAll('.img');
var resultArr = [];
for (var i = 0, len = imgList.length; i < len; i++) {
    localResizeIMG(imgList[i], {
        width: 800,
        quality: 0.7,
        success: function (result) {
            resultArr.push(result);
            if (resultArr.length === imgList.length) {
                console.log(resultArr);
            }
        }
    });
}

在上述代码中，我们使用了 querySelectorAll 函数获取了所有需要压缩的图片元素，使用 push 函数将压缩完成的图片结果存放到一个数组中，当数组长度等于压缩图片元素的长度时，说明所有图片处理完成，可以进行统一处理。

完整示例

假设我们需要将多个图片文件压缩并上传。首先，我们需要使用 input 元素，让用户选择本地图片文件，示例代码如下：

<input type="file" multiple="multiple" id="imgInput">

然后，在 JS 代码中，我们监听 input 元素的 change 事件，将选择的图片文件显示在页面中，并进行压缩处理，并将所有压缩后的图片数据保存到一个数组中，在上传时统一进行处理，示例代码如下：

var imgInput = document.getElementById('imgInput');
var imgContainer = document.getElementById('imgContainer');
var imgList = [];
var uploadBtn = document.getElementById('uploadBtn');

imgInput.addEventListener('change', function () {
    var fileList = this.files;
    for (var i = 0, len = fileList.length; i < len; i++) {
        var imgReader = new FileReader();
        var imgElem = document.createElement('img');
        imgReader.onload = function (e) {
            imgElem.src = e.target.result;
            imgContainer.appendChild(imgElem);
            imgList.push(imgElem);
            if (imgList.length === fileList.length) {
                compressImg();
            }
        }
        imgReader.readAsDataURL(fileList[i]);
    }
});

function compressImg() {
    var resultArr = [];
    for (var i = 0, len = imgList.length; i < len; i++) {
        localResizeIMG(imgList[i], {
            width: 800,
            quality: 0.7,
            success: function (result) {
                resultArr.push(result);
                if (resultArr.length === imgList.length) {
                    console.log(resultArr);
                }
            }
        });
    }
}

uploadBtn.addEventListener('click', function () {
    // 上传处理
});

在上述代码中，我们先监听了 input 元素的 change 事件，在 change 事件触发时，我们使用 FileReader 对象读取图片文件，使用 createElement 函数将读取到的图片文件显示在页面中，并将图片元素保存到 imgList 数组中。当 imgList 长度等于图片总数时，说明所有的图片都已经成功读取，我们可以调用 compressImg 函数对所有图片进行压缩处理，并将所有压缩后的图片数据存放到 resultArr 数组中。在上传按钮被点击时，我们可以将 resultArr 数组中的数据进行统一处理上传。

到此，我们已经介绍了使用 localResizeIMG4 库进行移动端图片压缩的完整攻略。