前端上传图片实现压缩

最新推荐文章于 2025-06-11 15:26:10 发布

熬夜小宝贝

最新推荐文章于 2025-06-11 15:26:10 发布

阅读量357

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言 vue.js

本文链接：https://blog.youkuaiyun.com/CycleByle/article/details/129746453

该文章介绍了一个JavaScript函数，用于压缩图片文件。函数使用FileReader读取文件，然后在Image加载后绘制到Canvas上，通过调整质量参数生成压缩后的JPEG数据URL，最后转换为File对象以便上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.压缩方法

/**
 * 压缩方法 
 * @param {string} file 文件
 * @param {Number} quality  0~1之间
*/
function compressImg(file, quality) {
  return new Promise((resolve) => {
    const reader = new FileReader() // 创建 FileReader
    reader.onload = ({
      target: {
        result: src
      }
    }) => {
      const image = new Image() // 创建 img 元素
      image.onload = async () => {
        const canvas = document.createElement('canvas') // 创建 canvas 元素
        canvas.width = image.width
        canvas.height = image.height
        canvas.getContext('2d').drawImage(image, 0, 0, image.width, image.height) // 绘制 canvas
        const canvasURL = canvas.toDataURL(`image/jpeg`, quality)
        const buffer = atob(canvasURL.split(',')[1])
        let length = buffer.length
        const bufferArray = new Uint8Array(new ArrayBuffer(length))
        while (length--) {
          bufferArray[length] = buffer.charCodeAt(length)
        }
        const miniFile = new File([bufferArray], file.name, {
          type: 'image/jpeg'
        })
        resolve({
          file: miniFile,
          origin: file,
          beforeSrc: src,
          afterSrc: canvasURL,
          beforeKB: Number((file.size / 1024).toFixed(2)),
          afterKB: Number((miniFile.size / 1024).toFixed(2))
        })
      }
      image.src = src
    }
    reader.readAsDataURL(file)
  })
}

2.调用

 compressImg(data.file, 0.2).then((newFile) => {
     // 将新的newFile上传即可   
  });