js图片大小压缩到指定范围

浅浅的花香味﹌ 2023-07-13 12:15 12阅读 0赞

### 文章目录 ###

*   *   *  1. compressUtil.js
         *  2. 使用方法

### 1. compressUtil.js ###

/** * 图片压缩类 * @param minSize * @param maxSize * @constructor */
    var PhotoCompress = function (minSize, maxSize) { 
        var nextQ = 0.5; // 压缩比例
        var maxQ = 1;
        var minQ = 0;
    
        /** * 将base64转换为文件 * @param base64Codes base64编码 * @param fileName 文件名称 * @returns {*} */
        PhotoCompress.prototype.dataUrlToFile = function (base64Codes, fileName) { 
            var arr = base64Codes.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bStr = atob(arr[1]),
                n = bStr.length,
                u8arr = new Uint8Array(n);
            while (n--) { 
                u8arr[n] = bStr.charCodeAt(n);
            }
            return new File([u8arr], fileName, { type: mime});
        }
    
        /** * 图片压缩 * @param file 文件 * @param callback 回调函数 */
        PhotoCompress.prototype.compress = function (file, callback) { 
            var self = this;
            self.imgBase64(file, function (image, canvas) { 
                var base64Codes = canvas.toDataURL(file.type, nextQ); // y压缩
                var compressFile = self.dataUrlToFile(base64Codes, file.name.split('.')[0]); // 转成file文件
                var compressFileSize = compressFile.size; // 压缩后文件大小 k
                console.log("图片质量：" + nextQ);
                console.log("压缩后文件大小：" + compressFileSize / 1024);
                if (compressFileSize > maxSize) {  // 压缩后文件大于最大值
                    maxQ = nextQ;
                    nextQ = (nextQ + minQ) / 2; // 质量降低
                    self.compress(file, callback);
                } else if (compressFileSize < minSize) {  // 压缩以后文件小于最小值
                    minQ = nextQ;
                    nextQ = (nextQ + maxQ) / 2; // 质量提高
                    self.compress(file, callback);
                } else { 
                    callback(compressFile);
                }
            });
        }
    
        /** * 将图片转化为base64 * @param file 文件 * @param callback 回调函数 */
        PhotoCompress.prototype.imgBase64 = function (file, callback) { 
            // 看支持不支持FileReader
            if (!file || !window.FileReader) return;
            var image = new Image();
            // 绑定 load 事件处理器，加载完成后执行
            image.onload = function () { 
                var canvas = document.createElement('canvas')
                var ctx = canvas.getContext('2d')
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                canvas.width = image.width * nextQ;
                canvas.height = image.height * nextQ;
                ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
                callback(image, canvas);
            };
            if (/^image/.test(file.type)) { 
                // 创建一个reader
                var reader = new FileReader();
                // 将图片将转成 base64 格式
                reader.readAsDataURL(file);
                // 读取成功后的回调
                reader.onload = function () { 
                    // self.imgUrls.push(this.result);
                    // 设置src属性，浏览器会自动加载。
                    // 记住必须先绑定事件，才能设置src属性，否则会出同步问题。
                    image.src = this.result;
                }
            }
        }
    };

说明：这边改变的图片的大小有两个地方：一是重画图片的时候，改变图片的长宽（按相同比例否者会变形），二是转base64的时候降低质量。二者缺一不可，具体步骤如下（二分法原理）：

1.  先将图片按照一定的比例重画，这边的比例是（maxQ+minQ）/2，也就是说原来的图片长宽会缩小为一半（1000*1000 会变成500*500），图片会相应变小，但是无法确定具体值。
2.  将重画的图片按照一定的质量转成base64，这边也是（maxQ+minQ）/2，图片大小也会减小。
3.  图片质量超过指定最大值，将maxQ变为（maxQ+minQ）/2，小于指定最小值则将minQ变为（maxQ+minQ）/2，重复1，2即可。

### 2. 使用方法 ###

var maxSize = 0.5 * 1024 * 1024; // 0.5M
    var minSize = 0.2 * 1024 * 1024; // 200K
    var photoCompress = new PhotoCompress(minSize, maxSize);
    photoCompress.compress(f, function(file) { 
                    var r = new FileReader()
                    r.readAsDataURL(file)
                    r.onload = function(e) { 
                        console.log("压缩后大小：" + file.size / 1024);
                        $("#originPic").prop("src", this.result)
                    }
                });