前端实现图片压缩—压缩图片大小，画质（两种方式）

最新推荐文章于 2024-05-15 21:22:04 发布

一朵野花压海棠

最新推荐文章于 2024-05-15 21:22:04 发布

阅读量4k

点赞数 1

分类专栏：工具文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/qq_37831545/article/details/127423851

版权

工具专栏收录该内容

17 篇文章 1 订阅

订阅专栏

这篇博客介绍了两种使用canvas压缩图片的方法。第一种方法根据图片的宽高比和指定的最大宽高来调整图片尺寸，然后设置默认的图片质量。第二种方法则直接基于画质压缩图片，允许指定压缩质量。在调用这些方法时，会先检查文件类型和大小，确保上传的图片符合要求。最后，压缩后的图片将被转换为blob格式。

摘要由CSDN通过智能技术生成

方法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();
        };
      });
},