前端进行图片压缩

前端原生js进行图片压缩；可以自定义压缩的大小

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
  <input type="file" accept="image/*" onchange="fGetFile(event)">

 <script type="text/javascript">
        var nMaxFileSize = 102400; //定义一个最大能的值。单位字节 Byte(B),
        // 获取本地上传的图片
        function fGetFile(event) {
            if (event.target.files[0].size > nMaxFileSize) {
                getInfo(event.target.files[0], 1); //如果上传的图片过大，就去压缩
            } else {
                console.log('无需压缩');
            }
        }
        // 图片压缩的结果
        function getInfo(oFile, size) {
            // console.log(size)
            if (size <= 0) return
            var reader = new FileReader();
            var name = oFile.name;
            var dataURL,
                blob,
                file,
                files,
                newImg;
            //这里把一个文件用base64编码
            reader.readAsDataURL(oFile);
            reader.onload = function (e) {
                newImg = new Image();
                //获取编码后的值,也可以用this.result获取
                newImg.src = e.target.result;
                newImg.onload = function () {
                    /* 获取 this.height tthis.width*/
                    dataURL = fCompress(newImg, this.width, this.height, size); //得到base64格式的-（已经是压缩过的）
                    /*为了兼容ios 需要 dataURL-> blob -> file */
                    blob = fDataURLtoBlob(dataURL); // dataURL-> blob
                    file = fBlobToFile(blob, name); // blob -> file
                    // console.log("得到文件：" + file);
                    // console.log("压缩后大小：" + file.size / 1024);
                    /*直接转为file  需要考虑兼容问题*/
                    files = fDataURLtoFile(dataURL, name)
                    // 如果得到的文件没有满足最大的需求就继续压缩
                    if (files.size > nMaxFileSize) {
                        getInfo(files, Number((size - 0.1).toFixed(1)))
                        console.log('正在压缩');
                    } else {
                        // alert('压缩完成')
                        console.log(dataURL) //满足条件的base64格式
                        console.log(files) //满足条件的文件
                    }
                    $("body").append("<img src='" + dataURL + "' class='image' />"); //渲染在页面上
                }
            }

        }
        // 通过画布对图片压缩，输出压缩过后的base64
        function fCompress(img, width, height, ratio) { // img可以是dataURL或者图片url
            /* 如果宽度大于 750 图片太大 等比压缩 */
            if (width > 750) {
                var ratio = width / height;
                width = 750;
                height = 750 / ratio;
            }
            var canvas, ctx, img64;
            canvas = document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
            ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, width, height);
            /* canvas.toDataURL(mimeType（图片的类型）, qualityArgument（图片质量）) */
            img64 = canvas.toDataURL("image/jpeg", ratio);
            return img64; // 压缩后的base64串
        }
        //将base64转换为blob
        function fDataURLtoBlob(dataurl) {
            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);
            }
            return new Blob([u8arr], {
                type: mime
            });
        }
        //将blob转换为file
        function fBlobToFile(theBlob, fileName) {
            theBlob.lastModifiedDate = new Date();
            theBlob.name = fileName;
            return theBlob;
        }
        // 直接把base64转为file
        function fDataURLtoFile(dataurl, filename) {
            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);
            }
            return new File([u8arr], filename, {
                type: mime
            });
        }
    </script>