在上一篇文章Javascript 基础夯实 —— 通过代码构建一个包含文件的 FormData 对象中提到了前端压缩图片的功能,所以本篇文章就来实现一下这个功能
前端获取本地图片文件
通过一个类型为的标签,我们可以获取到设备本地的文件,还可以声明一个的属性,这个属性用来过滤可以选择的文件,如果不声明则可以选择所有文件
在这里,的值是,这表示可以选择所有类型的图片文件,包括 png/jpg/jpeg/gif/bmp 等等,如果需要限制可以选择的文件类型,则可以改写成这样:
如果需要多选,还可以再声明一个属性
onchange 事件与获取选择的文件
我们可以通过事件监听到状态的改变,这样就能在选择完文件后,对文件进行操作
元素有一个属性,这个属性的值是一个文件对象数组,用来保存当前选择过的文件
读取文件对象内容
虽然获取到了选择的图片文件,但是我们并不能对 File 对象直接进行压缩的操作,而是需要先读取 File 对象的内容,再对读取到的内容进行操作
读取 File 对象的内容,我们可以通过 FileReader 对象来实现,此处以选择的第一张图片为例:
FileReader 对象上有以下属性及方法:
属性:
readyState:FileReader 当前的状态,有三种值,0-还未开始读取数据;1-正在读取数据;2-数据读取完成
result:在读取完成后才会存在的属性,值是读取到的文件的内容
onload:文件读取完成后触发的事件
error:读取文件时的错误信息
常用方法:
readAsDataURL:将 File 或 Blob 读取为一个 base64 编码的 URL 字符串
readAsText:读取 File 或 Blob 的文本内容,第二个参数可以指定编码类型,默认 utf-8
abort:取消读取的操作
需要注意的是, 和 都是异步的,必须监听 或者在 事件中才能获取到读取到的结果,所以出现多个文件需要遍历读取的情况时,需要特别注意
在上面的代码中,将图片文件读取为了一个 base64 编码的 URL 字符串,下面就可以通过这个字符串来创建一个 Image 对象了:
拿到图片文件生成的 image 对象,下面就可以正式进行图片的压缩了!
前端压缩图片的实现
压缩的实现又要借助到 canvas 画布元素。先来说一下原理,再来实现功能
原理简述
然后再将图片按比例缩放绘制到 canvas 上,再将 canvas 的上下文导出为一个 base64 的 url,导出的过程中我们可以设定导出的压缩比率和导出的图片格式
最终我们拿到了一个压缩后的图片的 base64 编码的 url,我们可以将这个 url 转为 Blob 对象,再通过表单的方式传输到后台。关于这一步,在开头的链接中,也就是上一篇文章已经说过了,在本文中不再赘述:
代码实现
需要注意的几点:
方法是 canvas 上下文环境的方法,而不是 canvas 元素的方法,这个方法可以接收多个参数,并且参数长度不同,作用也不同,在这里的作用是:将 image 从 (0, 0) 的位置开始截取一个宽高为 image.width, image.height 的图像(即将图像完整截取),放置在 canvas 上从 (0, 0) 开始,到 canvas.height, canvas.width 的区域中(也就是完整缩放在 canvas 中)。当传入其他数量参数时,小伙伴们可以参考这个页面:HTML DOM drawImage() 方法
导出图像方法 是 canvas 的方法,第一个参数hi导出的格式,不传或者传入错误格式的话,会默认使用 png 格式;第二个参数是导出的品质系数,范围为 0-1,默认 0.92,但是这个系数只对导出类型为 jpeg 和 webp 的图片生效
本文来自企鹅号 - 前端周记媒体
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文来自企鹅号 - 前端周记媒体
如有侵权,请联系 cloudcommunity@tencent.com 删除。