javascript实现图片压缩 + 模拟表单上传

之前做表单上传一直使用input标签完成,要么就是用过ajax传输base64编码,这次的需求把图片压缩过再传输,所以需要通过input type="file"获取到file对象后然后进行压缩处理再模拟Form提交文件。

压缩图片


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
function zipImage(file, ratio) {
return new Promise((resolve, reject) => {
var reader = new FileReader();
var img = new Image();
img.onload = function () {
// 通过canvas压缩图片
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = img.naturalWidth * ratio;
canvas.height = img.naturalHeight * ratio;
context.drawImage(img, 0, 0, canvas.width, canvas.height);
// 转换为文件格式
try {
canvas.toBlob((blob) => {
let result = new File([blob], file.name, { type: 'image/jpeg' })
resolve(result)
}, 'image/jpeg')
} catch (ex) {
reject(ex)
}
}
// 读文件成功的回调
reader.onload = function (e: any) {
// e.target.result就是图片的base64地址信息
img.src = e.target.result;
};
// 将图片读取为base64
reader.readAsDataURL(file);
})
}

实际所谓的压缩就是就是借助canvas实现按比例缩放绘制,然后通过canvas.toBlob再转换回File对象。

模拟表单发送文件


通过axios模拟表单,带上file就好了,记得在headers中设置'Content-Type': 'multipart/form-data'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function upload(file, toZip) {
// 压缩图片
if (toZip) {
file = await zipImage(file, 0.8)
}
// 创建表单
let formData = new FormData();
formData.append('file', file);
return axios({
url: uploadUrl,
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
}).then((res) => { return res.data })
}

这样就完成了模拟表单发送压缩过的图片的需求了。