来源：纯前端图片压缩

这个方法只能压缩jpg格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/**
 * 压缩图片的参数
 */
interface Options {
  file: File    // 文件
  quality?: number     // 文件质量 0.1~1
  success?: (base64: string) => void   // 回调函数
}

/**
 * 压缩图片工具类
 */
class CompressImg {

  options: Options
  fileReader = new FileReader()

  constructor(options: Options) {
    this.options = options
    if(this.options.file.type !== 'image/jpeg'){
      this.options.error?.('只能使用jpg格式')
    } else {
      // 开始执行
      this.init()
    }
  }

  // 执行
  init() {
    // 将原图片转base64，这是个异步方法
    this.fileReader.readAsDataURL(this.options.file)
    // 最终base64将在这个回调里接收
    this.fileReader.onload = (e)=> {
      // 开始压缩
      this.compress(e.target?.result as string)
    }
  }

  // 压缩图片
  compress(url: string) {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')

    const img = new Image()
    img.src = url

    // 图像加载完成后
    img.onload = ()=> {
      canvas.width = img.width
      canvas.height = img.height
      ctx?.drawImage(img, 0, 0, img.width, img.height)
      
      // 根据图像类型和配置的质量生成新base64
      const base64 = canvas.toDataURL(this.options.file.type, this.options.quality)
      // 回传给配置里的回调函数
      this.options.success?.(base64)
    }
  }
}

const file = document.querySelector('#file') as HTMLInputElement

file.addEventListener('change', (e)=> {
  const target = e.target as HTMLInputElement
  const file = target.files?.[0]
  if(file) {
    new CompressImg({
      file,
      quality: 0.5,
      success(base64) {
        console.log(base64)
        document.body.innerHTML = `<img src="${base64}">`
      }
    })
  }
})

压缩前：

压缩后：