js压缩图片实测

最新推荐文章于 2023-10-21 00:14:31 发布

qq_39205291

最新推荐文章于 2023-10-21 00:14:31 发布

阅读量716

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_39205291/article/details/82896231

版权

笔记专栏收录该内容

34 篇文章 0 订阅

订阅专栏

$.fn.localResizeIMG = function(obj) {
    this.on('change', function() {
        if(validate_img(this)){
            var file = this.files[0];
            var URL = window.URL || window.webkitURL;
            var blob = URL.createObjectURL(file);
            // 执行前函数
            if ($.isFunction(obj.before)) {
                obj.before(this, blob, file)
            };

            _create(blob, file);
            // this.value = ''; // 清空临时数据
        }
    });

    /**
     * 生成base64
     * @param blob 通过file获得的二进制
     */
    function _create(blob, file) {
        var img = new Image();
        img.src = blob;

        img.onload = function() {
            var that = this;
            //图片越大压缩程度越越高 质量越低
            obj.quality = 1 - (file.size/(10*1024*1024)).toFixed(1);
            if(obj.quality < 0.6){
                obj.quality = 0.6;
         }
            //生成比例
            var w = that.width,
                h = that.height,
                scale = w / h;
            w = obj.width || w;
            h = w / scale;
            //小于预设宽度则不做处理
            if(obj.width && that.width < obj.width){
                w = that.width,h = that.height;
            }
            //生成canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            $(canvas).attr({
                width: w,
                height: h
            });
            ctx.drawImage(that, 0, 0, w, h);

            /**
             * 生成base64
             * 兼容修复移动设备需要引入mobileBUGFix.js
             */
            var base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8);

            // 修复IOS
            /*if (navigator.userAgent.match(/iphone/i)) {
                var mpImg = new MegaPixImage(img);
                mpImg.render(canvas, {
                    maxWidth: w,
                    maxHeight: h,
                    quality: obj.quality || 0.8
                });
                base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8);
            }

            // 修复android
            if (navigator.userAgent.match(/Android/i)) {
                var encoder = new JPEGEncoder();
                base64 = encoder.encode(ctx.getImageData(0, 0, w, h), obj.quality * 100 || 80);
            }*/

            // 生成结果
            var result = {
                base64: base64,
                clearBase64: base64.substr(base64.indexOf(',') + 1)
            };

            // 执行后函数
            obj.success(result);
        };
    }
};

//限制上传文件的类型和大小
function validate_img(ele) {
    // 返回 KB，保留小数点后两位
    var file = ele.value;
    if (!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(file)) {
        alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
        return false;

    } else {
        //alert((ele.files[0].size).toFixed(2));
        //返回Byte(B),保留小数点后两位
        if (((ele.files[0].size).toFixed(2)) >= (10 * 1024 * 1024)) {
            alert("请上传小于10M的图片");
            return false;
        }
    }
    return true;
}