为什么要前端来压缩图片
最近在做一个移动端h5上传图片的功能，本来这个功能并不复杂，只需要将图片文件通过axios传到服务端即可，但是考虑到现在手机设配的拍照功能十分强大，随便一张照片都能动辄五六兆，而服务端的要求是上传图片必须小于两兆，而且直接传这么大图片，带宽它也受不了，所以前端进行压缩图片就成了一个必要的环节。
压缩效果
首先介绍下压缩的大概流程
- 通过原生的input标签拿到要上传的图片文件
- 将图片文件转化成img元素标签
- 在canvas上压缩绘制该HTMLImageElement
- 将canvas绘制的图像转成blob文件
- 最后将该blob文件传到服务端
- 完成！
接下来看下详细步骤
考虑到文章和步骤的完整性，所以我会把每个细节都写出来，即使有些东西很基础。
1. 使用Input标签来获取图片文件资源
这一步大家应该最熟悉不过了吧，原生input标签，通过设置 type 属性为file来让用户可以选择文件，设置 accept 限制选择的文件类型，绑定onchange事件，来获取确认选择后的文件
async function upload(file){
const img = await readImg(file)
const blob = await compressImg(img, file.type, 1000, 1000)
const formData = new FormData()
formData.append('file', blob, 'xxx.jpg')
axios.post('http://xxx.com/api',formData)
}
upload(file).catch(e => console.log(e))
到此这篇关于Javascript前端实现压缩图片功能的文章就介绍到这了,更多相关Javascript 压缩图片内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！
