Vue项目图片压缩

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
import { compressImage } from './compress'

...
// 校验大小数量
var file = document.querySelector('input').files[0]
if(this.fileList.length >= 3){
    Message.success({ content: `最多可上传3张` })
    return
}
if(file.size >= 1024 * 1024 * 2){
    Message.success({ content: `照片大于2MB,请重新上传` })
    return
}
// 压缩
/**
* @param { * } file input选择后返回的file对象
*/
compressImage(file).then((result) => {
	// result.compressFile 压缩后新的file对象
	var formData = new FormData()
    formData.set('file', result.compressFile)
    ...将此formData传给后端
})
...

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
/**
* @param { * } file input选择后返回的file对象
*/
export const compressImage = (file) => {
    // 参数file,是通过input 选择本地文件获取的
    return new Promise((resolve, reject) => {
        const { type, name, size } = file
        let img = new Image()

        // 创建一个reader实例
        let reader = new FileReader()

        // 读取拿到的文件
        reader.readAsDataURL(file)
        reader.onload = (e) => {

            // 文件加载成功后去转成Img对象，为了拿到图片的原始宽高
            img.src = e.target.result
            img.onload = () => {
                // 创建画布canvas
                let canvas = document.createElement('canvas')
                let content = canvas.getContext('2d')

                // 设置画布的宽高
                canvas.width = img.width // 需要压缩到的图片宽度
                canvas.height = img.width * (img.height / img.width)

                // 将图片画在画布上
                content.drawImage(img, 0, 0, canvas.width, canvas.height)

                //画布转成blob格式的图片
                canvas.toBlob((blob) => {
                        // blob 格式的图片 转成file对象，这里主要看接口支不支持blob格式的文件上传，如果支持就没有必要转
                        let file = new File([blob], name, { type: type, size: size })
                        resolve({ type: type, compressFile: file })
                    }, `image/${type.split('/')[1]}`, 0.6) // 0.7 是文件压缩程度
            }
        }
    })
}