使用Canvas API实现前端图片压缩功能

function loadImage(file) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    const url = URL.createObjectURL(file);
    
    img.onload = () => {
      URL.revokeObjectURL(url);
      resolve(img);
    };
    
    img.onerror = (e) => {
      reject(e);
    };
    
    img.src = url;
  });
}

async function compressImage(file, options = {}) {
  const { 
    quality = 0.8, 
    maxWidth = 800, 
    maxHeight = 800,
    mimeType = 'image/jpeg'
  } = options;
  
  // 加载原始图片
  const img = await loadImage(file);
  
  // 计算缩放比例
  const [newWidth, newHeight] = calculateSize(img, maxWidth, maxHeight);
  
  // 创建canvas并绘制
  const canvas = document.createElement('canvas');
  canvas.width = newWidth;
  canvas.height = newHeight;
  
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, newWidth, newHeight);
  
  // 转换为Blob对象
  return new Promise((resolve) => {
    canvas.toBlob(
      (blob) => resolve(blob),
      mimeType,
      quality
    );
  });
}

// 辅助函数：计算新尺寸
function calculateSize(img, maxWidth, maxHeight) {
  let width = img.width;
  let height = img.height;
  
  // 计算缩放比例
  if (width > height) {
    if (width > maxWidth) {
      height = Math.round((height * maxWidth) / width);
      width = maxWidth;
    }
  } else {
    if (height > maxHeight) {
      width = Math.round((width * maxHeight) / height);
      height = maxHeight;
    }
  }
  
  return [width, height];
}

const fileInput = document.querySelector('input[type="file"]');

fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;
  
  try {
    const compressedBlob = await compressImage(file, {
      quality: 0.7,
      maxWidth: 1024,
      maxHeight: 1024
    });
    
    // 使用压缩后的Blob
    console.log(`原始大小: ${file.size} bytes`);
    console.log(`压缩后: ${compressedBlob.size} bytes`);
    
    // 可以上传到服务器或提供给用户下载
  } catch (error) {
    console.error('压缩失败:', error);
  }
});

/**
 * 对选中的图片文件处理
 *
 * @param  {obj}  event  图片文件
 * */
uploadImg (event) {
    // 为选择文件返回
    if (!event.target.files[0]) return;
    let file = event.target.files[0],
        fileName = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase();
    // 文件格式校验
    if (fileName != "jpg" && fileName != "png" && fileName != "gif" ) {
        this.$store.commit('setPrompt', {status: true, text: '请选择正确的图片格式上传(jpg，png，gif)'})
        return
    }
    // gif图片格式不做处理，其他静态图片做质量压缩处理以减小图片大小
    if (fileName == 'gif') {
        this.uploadApi(file, file.name)
    } else {
        let _this = this;
        // 压缩图片需要的一些元素和对象
        let reader = new FileReader(), img = new Image();
        reader.readAsDataURL(file);
        // 缩放图片需要的canvas
        let canvas = document.createElement('canvas');
        let context = canvas.getContext('2d');
        // base64地址图片加载完毕后
        img.onload = function() {
            // 图片原始尺寸
            let originWidth = this.width;
            let originHeight = this.height;
            canvas.width = originWidth;
            canvas.height = originHeight;
            // 清除画布
            context.clearRect(0, 0, originWidth, originHeight);
            // 图片压缩
            context.drawImage(img, 0, 0, originWidth, originHeight);
            // canvas转为blob并上传
            canvas.toBlob(function(blob) {
                _this.uploadApi(blob, file.name)
            }, file.type == 'image/gif' ? 'image/gif' : "image/jpeg", 0.6);
        }
        // 文件base64化，以便获知图片原始尺寸
        reader.onload = function(e) {
            img.src = e.target.result;
        };
    }
},
/**
 * 上传选中的图片文件
 *
 * @param  {obj}    file  图片文件
 * @param  {string} fileName  文件名称
 * */
uploadApi(file, fileName) {
    let formData = new FormData()
    formData.append('img', file, fileName)
    axios.post('/upload/upload-img', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((res) => {
        if (res.data.code == 200) {
            this.img_list.splice(this.img_list.length, 1, res.data.url)
        } else {
            this.$store.commit('setPrompt', {status: true, text: res.data.message})
        }
    })
}