前端实现本地图片读取与简单压缩功能

在上一篇文章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 的图片生效

本文来自企鹅号 - 前端周记媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Vamei实验室

被解放的姜戈04 各取所需

作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明。谢谢! 我们在庄园疑云中讲到了服务器上的数据。当...

2005
来自专栏超然的博客

前端必知的ajax

1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。

1534
来自专栏陈纪庚

SPA页面初试

1022
来自专栏linux驱动个人学习

动态链接

要解决空间浪费和更新困难这两个问题最简单的办法就是把程序的模块相互分割开来,形成独立的文件,而不再将它们静态地链接在一起。简单地讲,就是不对那些组成程序的目标文...

1762
来自专栏jiajia_deng

处理 Qt 中文提示 “常量中有换行符”

在 Qt 自建的 Widget 窗口生成的 cpp 文件中,直接写中文编译时会提示错误。内容是 “常量中有换行符”。如下图所示:

9104
来自专栏瓜大三哥

vim命令总结

2317
来自专栏从零开始学自动化测试

Selenium2+python自动化59-数据驱动(ddt)

前言 在设计用例的时候,有些用例只是参数数据的输入不一样,比如登录这个功能,操作过程但是一样的。如果用例重复去写操作过程会增加代码量,对应这种多组数据的测试用例...

3006
来自专栏北京马哥教育

linux中的vi编辑器

vim文字处理器 linux 下的vi 是一种文字编辑器,后来的升级版本是vim。vi 分为三种模式:一般模式、编辑模式、命令命令模式。它们之间的关系如下: ?...

47211
来自专栏深度学习之tensorflow实战篇

linux下编辑VI窗口插入与编辑命令

前言 在嵌入式linux开发中,进行需要修改一下配置文件之类的,必须使用vi,因此,熟悉 vi 的一些基本操作,有助于提高工作效率。 一,模式 vi编辑器有3...

4986
来自专栏Java后端技术

Linux的Bash Shell详解

  1.什么是bash           bash是Bourne Again Shell的简称,是从unix系统中的sh发展而来的,是用户和Linux内核交互...

1074

扫码关注云+社区

领取腾讯云代金券