js压缩图片

功能实现：前端用js实现大图片压缩到2M以下，并上传到后端接口
html页面

import { convertBase64UrlToFile } from "@/utils/index.js";
import compress from "@/utils/compress.js"; //压缩图片

  // 上传图片
    handleBeforeUpload(file) {
      if (
        file.type == "image/png" ||
        file.type == "image/jpeg" ||
        file.type == "image/jpg"
      ) {
        this.handleSpinCustom();
        // 压缩图片并上传,大于2M才压缩
        if (file.size > 1024 * 1024 * 2) {
          compress(
            file,
            {
              quality: 1, //图片的质量（设置0.2图片大小更小）
            },
            (base64Codes) => {
              let newFile = convertBase64UrlToFile(base64Codes, file.name);
              this.uploadFiles(newFile); //调用图片上传接口
            }
          );
        } else {
          this.uploadFiles(file);
        }
        return false;
      } else {
        this.$Message.error("文件格式不正确，请上传jpg、jpeg或png格式的图片");
        return false;
      }
    },

compress.js 文件(压缩逻辑）

// 图片base64数据获取
const photoCompress = (file, compressedOption, callback) => {
  let fileReader = new FileReader();
  fileReader.readAsDataURL(file);

  fileReader.onload = () => {
    let fileResult = fileReader.result;
    canvasDataURL(fileResult, compressedOption, callback);
  };
};

// 图片渲染至画布 并获取指定质量图片
const canvasDataURL = (path, compressedOption, callback) => {
  let img = new Image();
  img.src = path;
  img.onload = () => {
    // 设置压缩后图片规格
    let quality = compressedOption.quality;
    const { width: originWidth, height: originHeight } = img;
    let scale = +(originWidth / originHeight).toFixed(2);
    let w = 800;

    // 判断只存在宽度时，根据比例设置高度
    let h = Math.round(800 / scale);

    // 生成canvas
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");

    // 设置宽高并渲染图片
    canvas.width = w;
    canvas.height = h;
    ctx.drawImage(img, 0, 0, w, h);

    let base64 = canvas.toDataURL("image/jpeg", quality);
    // https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

    // 回调函数返回base64的值
    callback(base64);
  };
};

export default photoCompress;

index.js 文件

// 图片转码处理
const convertBase64UrlToFile = (urlData, filename) => {
  let arr = urlData.split(",");
  let mime = arr[0].match(/:(.*?);/)[1];

  let bstr = atob(arr[1]);

  let n = bstr.length;

  let u8arr = new Uint8Array(n);

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }

  return new File([u8arr], filename, { type: mime });
};
export { convertBase64UrlToFile };

更多图片压缩方法请参考：www.python100.com/html/92003.…