图片上传前压缩，base64图片压缩

你的名字 2022-05-18 00:58 284阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      
    </head>
    
    <body>
      <div>
        <img src="imgz.jpg" alt="" width="350">
        <img src="" alt="" id="transform" width="350">
        <button onclick="zip()">click</button>
      </div>
      <script>
        /**
    * 图片压缩，默认同比例压缩
    * @param {Object} path 
    *   pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径
    * @param {Object} obj
    *   obj 对象 有 width， height， quality(0-1)
    * @param {Object} callback
    *   回调函数有一个参数，base64的字符串数据
    quality 图片缩放比例0-1 越大越清晰
    */
        function zip() {
          console.log(6666)
          // 调用函数处理图片 　　　　　　　　　　　　　　　　
          dealImage("imgz.jpg", {
            // 注意：在pc端可以用绝对路径或相对路径，移动端最好用绝对路径
            // width: 1000,
            quality: 0.1
          }, function (base) {
            console.log(base)
            document.getElementById("transform").src = base;
            var mb = showSize(base);
          })
        }
    
    
        function showSize(base64url) {
          //获取base64图片大小，返回字节
          var str = base64url.replace('data:image/png;base64,', '');
          var equalIndex = str.indexOf('=');
          if (str.indexOf('=') > 0) {
            str = str.substring(0, equalIndex);
          }
          var strLength = str.length;
          var fileLength = parseInt(strLength - (strLength / 8) * 2);
          console.log("压缩后的图片size", fileLength + "B")
          return fileLength;
        }
    
        function dealImage(path, obj, callback) {
          var img = new Image();
          img.src = path;
          img.onload = function () {
            var that = this;
            var ext = path.substring(path.lastIndexOf(".") + 1).toLowerCase();
            // 默认按比例压缩
            var w = that.width,
              h = that.height,
              scale = w / h;
            w = obj.width || w;
            h = obj.height || (w / scale);
            var quality = obj.quality;  // 默认图片质量为0.7,可以为image/jpeg或image/webp类型的图片设置图片质量，取值0-1，超出则以默认值0.92替代
            //生成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);
            ctx.drawImage(that, 0, 0, w, h);
            // 图像质量
            if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
              quality = obj.quality;
            }
            // quality值越小，所绘制出的图像越模糊
            console.log("tup", ext)
            var base64 = canvas.toDataURL('image/jpeg', quality);
            // 回调函数返回base64的值
            callback(base64);
          }
        }
      </script>
    </body>
    
    </html>