前端图片压缩（几乎无损）

前端经常会有图片压缩这样的需求，我尝试过很多种压缩方法，最后决定推荐lrz压缩方式
lrz(file, [options]);
1、file 通过 input:file 得到的文件，或者直接传入图片路径
2、[options] 这个参数允许忽略
3、width {Number} 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。
4、height {Number} 同上
5、quality {Number} 图片压缩质量，取值 0 - 1，默认为0.7
库的话直接去http://www.bejson.com/ui/compress_img/
使用
html

 <div class="single_container">
    <div class="dragImgBox" id="dropZone">请拖拽本地文件到此处</div>
    <div class="operation_container">
      <span class="choseImg">选择图片</span>
      <input type="file" accept="image/*" style="display: none;" class="operation_chose">
      <input type="range" name="" class="range" id="range" min="0" max="100" value="60">
      <span class="operationWord">压缩率：<span>60</span>%</span>
      <a class="batch_btn" href="/img-compresspro" id="pdfto_227" target="_blank">批量压缩</a>
    </div>
    <div class="imgFile_container" style="display: none;">
      <div class="imgFile_container_top">
        <p class="imgFileOsize">源文件大小：<span></span></p>
        <p class="imgFileTsize">压缩后大小：<span></span></p>
        <span class="imgFileDown">下载压缩图片</span>
      </div>
      <div class="imgFile_container_middle">
        <img src="" alt="">
      </div>
    </div>
  </div>

js
引入

<script src="/ols/Tpl/Index/Public/js/jquery-1.7.2.min.js"></script>
<script src="/ols/Tpl/Index/Public/picyasuo/js/jxtech_pic_zip.js"></script>

封装好的方法：压缩，下载，字节转换

//压缩方法
    function singleZip(file,quality){
      lrz(file,{quality:quality})//这里可以自定义一下图片压缩比率和压缩后的宽高
          .then(function(rst){
          var img = new Image();
          img.src = rst.base64;//将压缩后的base64赋给img的src,然后可以赋给标签的src属性
          imgbase64 = rst.base64;
          $(".imgFileOsize span").text(changSize(file.size))
          $(".imgFileTsize span").text(changSize(rst.fileLen))
          $(".imgFile_container_middle img").attr("src",rst.base64)
          $(".imgFile_container").show();
        })
    }
    function changSize(limit) {
      var size = "";
      if(limit < 0.1 * 1024){ 
          if(limit < 0.1 * 100){
              size = 0;
          } else{
              size = limit.toFixed(2) + "B"  //小于0.1KB，则转化成B
          }                         
          
      }else if(limit < 0.1 * 1024 * 1024*1024){            //小于0.1MB，则转化成KB
              size = (limit/1024).toFixed(2) + "KB"
          }
          else{                                            //其他转化成GB
          size = (limit/(1024 * 1024 * 1024)).toFixed(2) + "GB"
      }
      var sizeStr = size + "";                        //转成字符串
      var index = sizeStr.indexOf(".");                 //获取小数点处的索引
      var dou = sizeStr.substr(index + 1 ,2)            //获取小数点后两位的值
      if(dou == "00"){                                //判断后两位是否为00，如果是则删除00                
          return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
      }
      return size;
    }

    function downLoad(base,name){
      var a = document.createElement('a');
      a.download = name;
      a.innerHTML = 'download';
      a.href = base;
      a.click();
    }

调用

var q_num = 0.4;   //压缩质量
var imgFile ;    //图片文件
var imgbase64; //压缩后得图片base64
var _fileName;

按钮点击选择图片压缩

//选择图片
    $(".operation_chose").change(function(e){
      imgFile = e.target.files[0];
      _fileName = imgFile.name
      singleZip(imgFile,q_num)
    }) 
    // 调整压缩比例
    $(".range").change(function(){
      q_num = 1 - parseInt($(this).val())/100;
      $(".operationWord span").text($(this).val())
      if(imgFile){
        singleZip(imgFile,q_num)
      }
    })
    // 下载图片
    $(".imgFileDown").click(function(){
        downLoad(imgbase64,_fileName)
    })

拖拽压缩

// 拖拽文件
    var dp = document.querySelector( '#dropZone' );
    document.addEventListener('drop', function (e) {
        e.preventDefault()
    }, false)
    document.addEventListener('dragover', function (e) {
        e.preventDefault()
    }, false)
    if(dp==null){
        return;
    }
    dp.addEventListener('dragover', function(e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = '导入';
    });
    dp.addEventListener("drop", function(e) {
        e.stopPropagation();
        e.preventDefault();
        var file = e.dataTransfer.files;
        imgFile = file[0];
        var fileName = file[0].name;
        _fileName = fileName;
        var fileType = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
        var fileFlag;
        if(file.length>1){
            alert("文件只能单个上传")
        }else{
            if(fileType!=="png"&&fileType!=="jpg"&&fileType!=="webp"&&fileType!=="gif"&&fileType!=="jpeg"&&fileType!=="bmp"){
              alert("请上传图片格式")
            }else{
              singleZip(imgFile,q_num)
            }
        }
    });

end~