作者：wuwhs
https://segmentfault.com/a/1190000023486410
说明
js-image-compressor 是一个实现轻量级图片压缩的 javascript 库，压缩后仅有 5kb，在前端页面即可实现对图片的压缩。在提供基本图片压缩功能同时，还暴露出图片处理相关公用方法，以及进行边界情况处理：
可以对待转化图片大小设置一定的阈值，使得图片转化成 png 格式在不理想情况下不至于过大，同时大于这个阈值则可以自动转化成 jpeg 格式，实现更优压缩；

可以限制输出图片宽高大小，从而防止意外情况发生，比如压缩运算过大使得浏览器奔溃；

默认对 png 输出图片添加透明底色，其他格式设为白色，避免“黑屏”发生；

提供一些图片处理的常用工具函数（image2Canvas、canvas2Blob 和 canvas2DataUrl 等），用户还可以自定义图片输出的样式特征（比如可以灰度处理、加水印）。
npm安装
npm install js-image-compressor -D

github
https://github.com/wuwhs/js-image-compressor

1.压缩方法

/*图片压缩方法 imageHandel.imageCompress(若按照指定大小压缩则quality参数无效；按照图片大小压缩会存在误差。)
@author luxuebo
@Date 2020/04/04
@param file {File|Blob} 需要压缩的的图片
@param config {Object} 配置
@param config.quality {Number} 图片压缩质量 取值0-1，最小颗粒度为0.01
@param config.width {Number} 压缩后的图片宽度，默认值原始图片宽度
@param config.height {Number} 压缩后的图片高度，默认值原始图片高度
@param config.size {Number} 压缩后的图片大小，单位kb
@param config.img {DOM元素} 压缩后的图片展示位置
@param config.success {Function）} 压缩成功返回结果对象，包含：sourceFile(源文件)、file（压缩后的文件）、base64（压缩后的base64编码）
@return 无返回值
备注：如果按照图片大小压缩，图片较大，建议先用先按照quality压缩一次，在按照图片大小压缩，否则耗时较长
使用例子：
imageHandel.imageCompress(file, {
    size: 200,//非必填
    // quality: 0.6,//非必填
    // width: 100,//非必填
    // height: 100,//非必填
    img: document.getElementById('compressResult'),//非必填
    success: function (res) {
        console.log(res)
    }
})

*/
; (function () {
    function imageCompress(file, config) {
        if (!file) {
            console.log('请传入要压缩的图片')
            return ;
        }
        if(!config){
            config = {};
        }
        if (config.size) {
            if (file.size / 1024 < config.size) {
                console.log('图片小于指定值，不需要压缩')
                fileToBase64(file, function (base64Data) {
                    imgView(base64Data, config.img)
                    config.success({
                        sourceFile: file,
                        file: file,
                        base64: {
                            size: getBase64Size(base64Data, file.type),
                            base64Data: base64Data
                        }
                    })
                })
            } else {
                compressMethods(file, config, 0, 1, 0.5)
            }

        } else {
            var quality = config.quality ? config.quality : 0.9;
            fileToBase64(file, function (base64Data) {
                imgView(base64Data, null, function (img) {
                    var w = config.width ? config.width : img.width;
                    var h = config.height ? config.height : img.height;
                    // 生成canvas
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    // 创建属性节点
                    var anw = document.createAttribute("width");
                    anw.nodeValue = w;
                    var anh = document.createAttribute("height");
                    anh.nodeValue = h;
                    canvas.setAttributeNode(anw);
                    canvas.setAttributeNode(anh);

                    // 铺底色 PNG转JPEG时透明区域会变黑色
                    ctx.fillStyle = "#fff";
                    ctx.fillRect(0, 0, w, h);

                    ctx.drawImage(img, 0, 0, w, h);
                    // quality值越小，所绘制出的图像越模糊
                    var base64 = canvas.toDataURL('image/jpeg', quality); // 图片格式jpeg或webp可以选0-1质量区间
                    imgView(base64, config.img)
                    //返回结果
                    config.success({
                        sourceFile: file,
                        file: base64ToBlob(base64),
                        base64: {
                            size: getBase64Size(base64, 'image/jpeg'),
                            base64Data: base64
                        }
                    })
                })
            })
        }
    }
    function compressMethods(File, config, leftQuality, rightQuality, quality) {
        //采用二分法计算
        /*
        @param File 要压缩的图片
        @param config 配置参数
        @param leftQuality，二分法左临界值
        @param rightQuality 二分法右临界值
        @param quality 压缩质量
        */
        var reader = new FileReader();//IE10+
        if (File) {
            //读取指定的 Blob 或 File 对象  触发loadend 事件 并将图片的base64编码赋值给result
            reader.readAsDataURL(File);
            //异步通信 回调函数返回
            reader.onload = function (e) {
                var base64Data = reader.result;
                //返回base64编码
                var img = new Image();
                img.src = base64Data;
                img.onload = function (e) {
                    compress(File, img, config, leftQuality, rightQuality, quality)

                }
                img.onerror = function (err) {
                    console.log('图片预览加载失败')
                }
            }
        }
    }
    function compress(File, img, config, leftQuality, rightQuality, quality) {
        var w = config.width ? config.width : img.width;
        var h = config.height ? config.height : img.height;
        // 生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 创建属性节点
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);

        // 铺底色 PNG转JPEG时透明区域会变黑色
        ctx.fillStyle = "#fff";
        ctx.fillRect(0, 0, w, h);

        ctx.drawImage(img, 0, 0, w, h);
        // quality值越小，所绘制出的图像越模糊
        var base64 = canvas.toDataURL('image/jpeg', quality); // 图片格式jpeg或webp可以选0-1质量区间
        //压缩结果
        var res = {
            sourceFile: File,
            file: base64ToBlob(base64),
            base64: {
                size: getBase64Size(base64, 'image/jpeg'),
                base64Data: base64
            }
        }
        if (res.base64.size / 1024 > config.size) {
            if (rightQuality == leftQuality || rightQuality == quality || leftQuality == quality) {
                //存在的误差，比给定要压缩的值要大一些
                imgView(res.base64.base64Data, config.img)
                config.success(res)
            } else {
                var rightQuality = quality;
                var quality = ((leftQuality + rightQuality) / 2).toFixed(2) * 1
                compress(File, img, config, leftQuality, rightQuality, quality)
            }

        } else if (res.base64.size / 1024 < config.size) {
            if (rightQuality == leftQuality || rightQuality == quality || leftQuality == quality) {
                //存在的误差，比给定要压缩的值要小一些
                imgView(res.base64.base64Data, config.img)
                config.success(res)
            } else {
                var leftQuality = quality;
                var quality = ((leftQuality + rightQuality) / 2).toFixed(2) * 1
                compress(File, img, config, leftQuality, rightQuality, quality)
            }
        } else {
            imgView(res.base64.base64Data, config.img)
            config.success(res)
        }
    }
    function imgView(base64Data, domtag, callback) {
        var img = new Image();
        img.src = base64Data;
        img.onload = function (e) {
            if (domtag) {
                domtag.appendChild(img)
            }
            callback && callback(img)
        }
        img.onerror = function (err) {
            console.log('图片预览加载失败')
        }
    }
    function fileToBase64(File, callback) {
        var reader = new FileReader();//IE10+
        if (File) {
            //读取指定的 Blob 或 File 对象  触发loadend 事件 并将图片的base64编码赋值给result
            reader.readAsDataURL(File);
            //reader.readAsText(File)
            //异步通信 回调函数返回
            reader.onload = function (e) {
                var base64Data = reader.result;
                //返回base64编码
                callback(base64Data);
            }
        }
    }
    function getBase64Size(base64str, type) {
        //获取base64图片大小，返回kb数字
        let str = base64str.replace('data:' + type + ';base64,', '');
        let equalIndex = str.indexOf('=');
        if (str.indexOf('=') > 0) {
            str = str.substring(0, equalIndex);
        }
        let strLength = str.length;
        let fileLength = parseInt(strLength - (strLength / 8) * 2);
        return fileLength;
    }
    function base64ToBlob(dataurl, fileName) {
        //先转为Blob
        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        var theBlob = new Blob([u8arr], { type: mime });

        //再转为File
        theBlob.lastModifiedDate = new Date();
        theBlob.name = fileName || Math.random() * 1000000 + '.jpeg';
        return theBlob;
    }
    window.imageHandel = {
        imageCompress: imageCompress,
        fileToBase64: fileToBase64,
        getBase64Size: getBase64Size,
        base64ToBlob: base64ToBlob
    }
}());




2.使用例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>image-compress</title>
    <script src="./compress-img.js"></script>
</head>

<body>
    <input type="file" id="file">
    <button id="ys">压缩</button>
    <div id="compressResult">
    </div>
    <script>
        var ysbtn = document.getElementById('ys')
        ysbtn.addEventListener('click', function () {
            var file = document.getElementById('file').files[0];
            imageHandel.imageCompress(file, {
                size: 200,
                // quality: 0.6,
                // width: 100,
                // height: 100,
                img: document.getElementById('compressResult'),
                success: function (res) {
                    console.log(res)
                }
            })
        })
    </script>
</body>

</html>

3.推荐两个插件

3.1.https://github.com/think2011/localResizeIMG

3.2 https://github.com/WangYuLue/image-conversion

 

js 压缩图片及ajax上传图片
js压缩图片
ajax 上传文件


最近做的一个微信活动中需要用到图片上传功能，具体就是用户通过手机拍照上传图片来参与活动。在测试的过程中我们发现上传的图片非常大。我们知道现在的手机拍出的图片都非常的大，一般是2~5M，甚至10多M的都有。这么大的图片上传上来，用户的上传体验非常不好，而且给服务器带宽增加了很大的压力，服务器的磁盘空间也会被渐渐撑爆，即使改成上传到oss，也不是很好的办法。于是前端同事就想到先用js压缩图片再上传。我就跟着偷偷学习一下。

js压缩图片
/**
 * js压缩图片
 * @param file 图片文件对象
 * @param quality 压缩倍率 0~1
 * @constructor
 */
function compressImage(file, quality) {

    // 图片小于1M不压缩
    if (file.size < Math.pow(1024, 2)) {
        return file;
    }
    //默认0.5倍压缩
    quality = quality || 0.5;
		
	//保存文件名，后边用到
    var name = file.name; 
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        var src = e.target.result;

        var img = new Image();
        img.src = src;
        img.onload = function (e) {
            var w = img.width;
            var h = img.height;
            //生成canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            // 创建属性节点
            var anw = document.createAttribute("width");
            anw.nodeValue = w;
            var anh = document.createAttribute("height");
            anh.nodeValue = h;
            canvas.setAttributeNode(anw);
            canvas.setAttributeNode(anh);

            //铺底色 PNG转JPEG时透明区域会变黑色
            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, w, h);

            ctx.drawImage(img, 0, 0, w, h);
            // quality值越小，所绘制出的图像越模糊
            var base64 = canvas.toDataURL('image/jpeg', quality); //图片格式jpeg或webp可以选0-1质量区间

            // 返回base64转blob的值
            console.log('\u539F\u56FE' + (src.length / 1024).toFixed(2) + 'kb', '\u65B0\u56FE' + (base64.length / 1024).toFixed(2) + 'kb');
            //去掉url的头，并转换为byte
            var bytes = window.atob(base64.split(',')[1]);
            //处理异常,将ascii码小于0的转换为大于0
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i);
            }
            //通过Blob生成新图片文件对象
            file = new Blob([ab], { type: 'image/jpeg' });
            //这里需要重新设置文件名
            file.name = name;

            return file;
        };
        img.onerror = function (e) {
            console.error(e)
        };
    };
    reader.onerror = function (e) {
       console.error(e)
    };
};

主要用到的原生组件：FileReader、Canvas、Blob、FormData
逻辑步骤：

FileReader.readAsDataURL将上传的图片文件转为Base64格式
将img绘制到canvas上，canvas.toDataURL压缩图片
new Blob将压缩后的Base64转为Blob格式
FormData.append将图片文件数据存入formdata

注意问题：

PNG转JPEG时PNG格式的透明区域会变黑色，需要先手动铺底色
toDataURL参数为PNG时不支持传图片质量，所以需要写image/jpeg或image/webp，具体可以参考toDataURL的api
需要先保存文件名，然后生成新的图片后设置文件名为原来的文件名。
formData.append第三个参数filename是有浏览器兼容性问题的，如果不传，图片到后台的文件名会变成blob (filename=blob)，后端校验文件名可能过不去。我们就遇到了这个问题。

ajax 上传文件
/**
 * ajax上传文件
 * @param file 文件对象
 */
function upload(file) {
    var formData = new FormData();
    formData.append("file", file, file.name);
    $.ajax({
        url: 'asianCup/uploadBarCode',
        dataType: 'json',
        type: "POST",
        cache: false, 
        contentType: false, //必须
        processData: false, //必须
        data: formData,
        async: true,
        success: function (data) {
            if (data.success) {
                alert("上传成功");
            } else {
                //异常提示
                alert(data.code + "-" + data.msg);
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
        	console.error(errorThrown);
            if (XMLHttpRequest.responseText.indexOf("400") > -1) {
                //接口或参数出错
                alert("网络不给力，请稍后再试！");
            } else {
                //服务器重启
                alert("网络不给力，请稍后再试！");
            }
        }
    });
}

ajax上传文件需要构建一个formDate对象，将文件appendj进去，然后把formDate对象放到ajax的data参数即可，如果页面本身已经有表单了，也可以直接放到data，并且下面二个参数是必须的：
contentType: false,//必须false才会自动加上正确的Content-Type
processData: false,//必须false才会避开jQuery对 formdata 的默认处理，XMLHttpRequest会对 formdata 进行正确的处理


参考

js压缩图片

ajax上传图片

压缩及上传

我们知道，对于你非常清晰的图片，它所占内存十分大，一般我们会使用压缩将图片存放在我们的手里。在JavaScript中，也可以对图片进行压缩。本文介绍js压缩图片的实现原理及实现过程。
一、压缩原理
js实现对上传图片的路径转成base64编码，把图片用canvas画出来再转成二进制数据，降低分辨率，并且对图片进行压缩。
二、具体实现
第一步：通过input标签获取本地图片
第二步：把获取到的图片转换成base64格式let fileObj = document.getElementById('file').files[0] //获取文件对象
let reader = new FileReader() //新建一个FileReader对象
reader.readAsDataURL(fileObj)//将读取的文件转换成base64格式
reader.onload = function(e) { console.log(e.target.result) //转换后的文件数据存储在e.target.result中 }
第三步：使用canvas中的API把图片分辨率调低context.drawImage(image, 0, 0, imageWidth, imageHeight)
注意：canvas只能处理base64格式的图片
以上就是js压缩图片的实现原理及实现过程，大家可以套用上述代码压缩图片，不过要理解压缩原理哦~