首页 前端知识 前端实现图片压缩—压缩图片大小,画质(两种方式)

前端实现图片压缩—压缩图片大小,画质(两种方式)

2024-03-15 10:03:33 前端知识 前端哥 213 980 我要收藏

图片压缩画质

  • 方法1:压缩图片--根据 宽 高 画质压缩图片
  • 方法二:压缩图片--根据画质压缩图片
  • 方法调用

方法1:压缩图片–根据 宽 高 画质压缩图片

在这里插入图片描述

  /* 图片压缩方法-canvas压缩  压缩图片--根据 宽 高 画质压缩图片*/
    compressUpload(file, config) {
      let read = new FileReader();
      read.readAsDataURL(file);
      const fileName = file.name;
      return new Promise((resolve, reject) => {
        // 生成canvas
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");
        let _this = this;
        read.onload = function (e) {
          let img = new Image();
          img.src = e.target.result;
          img.onload = function () {
            let w = this.width;
            let h = this.height;
            let scale = w / h;
            w = config.width || config.height * scale || w;
            h = config.height || config.width / scale || h;
            // 最大宽高如有限制时的处理
            w = config.maxWidth && w > config.maxWidth ? config.maxWidth : w;
            h = config.maxHeight && h > config.maxHeight ? config.maxHeight : h;
            w = Math.min(w, h * scale) || w;
            h = Math.min(h, w / scale) || h;

            let quality = 0.7; // 默认图片质量
            // 创建属性节点
            let anw = document.createAttribute("width");
            anw.nodeValue = w;
            let anh = document.createAttribute("height");
            anh.nodeValue = h;
            canvas.setAttributeNode(anw);
            canvas.setAttributeNode(anh);
            ctx.drawImage(this, 0, 0, w, h);
            if (config.quality && config.quality <= 1 && config.quality > 0) {
              quality = config.quality;
            }
            let base64 = canvas.toDataURL("image/jpeg", quality);
            // 回调函数返回base64的值,也可根据自己的需求转换
            resolve(base64);
            canvas = null;
          };
        };
      });
    },

方法二:压缩图片–根据画质压缩图片

在这里插入图片描述

    /* 图片压缩方法-canvas压缩  根据画质压缩图片 */
compressUpload(image, file, quality) {
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
  let { width } = image,
    { height } = image;
  canvas.width = width;
  canvas.height = height;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(image, 0, 0, width, height);
  let base64 = canvas.toDataURL(file.type || "image/jpeg", quality);
  // 压缩后调用方法进行base64转Blob,方法写在下边
  return  base64;
  canvas = null;
},

方法调用

 <el-upload
   ref="upload"
   class="avatar-uploader"
   action="https://jsonplaceholder.typicode.com/posts/"
   :before-upload="beforeUpload"
   :auto-upload="false"
   accept=".jpg,.png,.jpeg"
   :on-change="handleChange"
 >
   <!-- <img v-if="imageUrl1" class="avatar-uploader-icon" :src="imageUrl1" alt="" /> -->
  <i class="el-icon-plus avatar-uploader-icon"></i>
beforeUpload(file) {
      console.log("压缩前:", file);
      let _this = this;
      const isIMG = file.type == "image/jpeg" || file.type == "image/png" || file.type == "image/jpg";
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isIMG) {
        this.$message.error("上传图片只能是 .jpg/.png/.jpeg 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 5MB!");
      }
      return new Promise((resolve, reject) => {
        let isLt2M = file.size / 1024 / 1024 < 10; // 判定图片大小是否小于10MB
        if (!(isLt2M && isIMG)) {
          reject();
        }
        let image = new Image(),
          resultBlob = "";
        image.src = URL.createObjectURL(file);

        image.onload = () => {
          // 调用方法获取blob格式,方法写在下边   以下方法二选一:
          resultBlob = _this.compressUpload(file, this.form);
          resultBlob = _this.compressUpload(image, file, this.form.quality);
          resolve(resultBlob);
        };
        image.onerror = () => {
          reject();
        };
      });
},
转载请注明出处或者链接地址:https://www.qianduange.cn//article/3832.html
标签
评论
发布的文章

jQuery之class类操作

2024-04-12 20:04:54

jQuery 菜鸟教程学习

2024-04-12 20:04:22

jQuery

2024-01-31 12:01:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!