JavaScript前端实现压缩图片功能前端实现压缩图片功能
为什么要前端来压缩图片为什么要前端来压缩图片
最近在做一个移动端h5上传图片的功能,本来这个功能并不复杂,只需要将图片文件通过axios传到服务端即可,但是考虑到
现在手机设配的拍照功能十分强大,随便一张照片都能动辄五六兆,而服务端的要求是上传图片必须小于两兆,而且直接传这
么大图片,带宽它也受不了,所以前端进行压缩图片就成了一个必要的环节。
压缩效果
首先介绍下压缩的大概流程
通过原生的input标签拿到要上传的图片文件
将图片文件转化成img元素标签
在canvas上压缩绘制该HTMLImageElement
将canvas绘制的图像转成blob文件
最后将该blob文件传到服务端
完成!
接下来看下详细步骤接下来看下详细步骤
考虑到文章和步骤的完整性,所以我会把每个细节都写出来,即使有些东西很基础。
1. 使用使用Input标签来获取图片文件资源标签来获取图片文件资源
这一步大家应该最熟悉不过了吧,原生input标签,通过设置 type 属性为file来让用户可以选择文件,设置 accept 限制选择的文
件类型,绑定onchange事件,来获取确认选择后的文件
<input type="file" accept="image/*" />
点击控件,触发焦点,打开文件资源管理器,选中文件并确认后,会触发change事件,所以可以在change事件的回调中获取
选中文件,它长这个样
2. 读取文件转成读取文件转成img标签元素标签元素
拿到图片文件后,先将其转成HTMLImageElement,也就是普通的img标签,具体要使用 FileReader构造函数。
先new出来一个img和fileReader的实例,通过fileReader的 readAsDataURL这个api,来读取图片文件,其返回值是一个编码
后的base64的字符串,然后将这个字符串赋值给img的src属性上,这样就完成了图片文件到 HTMLImageElement的转化。
// 先new一个img和fileReader的实例
const img = new Image()
const reader = new FileReader()// 读取文件资源
reader.readAsDataURL(file)
reader.onload = function(e){
img.src = e.target.result
}
评论0