JS上传图片时压缩的demo-可直接运行查看结果

最新推荐文章于 2022-06-22 09:50:58 发布

~小仙女~

最新推荐文章于 2022-06-22 09:50:58 发布

阅读量169

点赞数

分类专栏：上传图片的时候压缩文章标签： javascript

本文链接：https://blog.csdn.net/baidu_41604826/article/details/113625263

版权

上传图片的时候压缩专栏收录该内容

2 篇文章 0 订阅

订阅专栏

完整demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js压缩图片测试</title>
    <style>
      #showImg {
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="uploadBox">
      <input
        type="file"
        onchange="uoloadImg(event,this)"
        accept="image/jpg,image/jpeg,image/png,image/svg,image/gif"
      />
      <div>
        <img id="showImg" src="" alt="" />
      </div>
    </div>
  </body>
</html>

<script>
  //e事件对象  dom  元素本身
  function uoloadImg(e, dom) {
    var file = dom.files[0];
    console.log("压缩前的file文件：",file)
    photoCompress(file, file.size, function backBase64(base64Codes) {
      //此处返回base64格式的图片 ：base64Codes
      //把base64Codes赋值给Img  业务逻辑自行处理
      document.getElementById("showImg").src = base64Codes;

      //如果后台需要上传file文件，需要把64格式再处理为file
      var finalFile = dataURLtoFile(base64Codes,file.name)
      console.log("压缩后又处理为File类型的值",finalFile)
    });
  }
  //file:file文件，imgSize:大小  objDiv:回调
  function photoCompress(file, imgSize, callback64) {
    var ready = new FileReader();
    ready.readAsDataURL(file);
    const _this = this;
    ready.onload = function () {
      var fileResult = this.result;
      canvasDataURL(fileResult, imgSize, callback64);
    };
  }
  //压缩处理
  function canvasDataURL(path, imgSize, callback) {
    var img = new Image();
    img.src = path;
    var objCompressed = {};
    img.onload = function () {
      var that = this;
      //默认压缩后图片规格
      var quality = 0.7;
      if (imgSize >= 5242880 && imgSize <= 10485760) {
        quality = 0.4;
      } else if (imgSize > 10485760) {
        quality = 0.2;
      } else {
        quality = 0.7;
      }
      var w = that.width;
      var h = that.height;
      var scale = w / h;
      //实际要求
      w = objCompressed.width || w;
      h = objCompressed.height || w / scale;
      //生成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);

      var base64 = canvas.toDataURL("image/jpeg", quality);
      // 回调函数返回base64的值
      callback(base64);
    };
  }
  //把64格式处理为file文件
  function dataURLtoFile(base64Codes,filename) {
  	    var arr = base64Codes.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>