JavaScript前端实现压缩图片功能

为什么要前端来压缩图片

最近在做一个移动端h5上传图片的功能，本来这个功能并不复杂，只需要将图片文件通过axios传到服务端即可，但是考虑到现在手机设配的拍照功能十分强大，随便一张照片都能动辄五六兆，而服务端的要求是上传图片必须小于两兆，而且直接传这么大图片，带宽它也受不了，所以前端进行压缩图片就成了一个必要的环节。

压缩效果

首先介绍下压缩的大概流程

• 通过原生的input标签拿到要上传的图片文件
• 将图片文件转化成img元素标签
• 在canvas上压缩绘制该HTMLImageElement
• 将canvas绘制的图像转成blob文件
• 最后将该blob文件传到服务端
• 完成！

接下来看下详细步骤

考虑到文章和步骤的完整性，所以我会把每个细节都写出来，即使有些东西很基础。

1.  使用Input标签来获取图片文件资源

这一步大家应该最熟悉不过了吧，原生input标签，通过设置 type 属性为file来让用户可以选择文件，设置 accept 限制选择的文件类型，绑定onchange事件，来获取确认选择后的文件

1. <input type="file" accept="image/*" />

点击控件，触发焦点，打开文件资源管理器，选中文件并确认后，会触发change事件，所以可以在change事件的回调中获取选中文件，它长这个样

2. 读取文件转成img标签元素

拿到图片文件后，先将其转成HTMLImageElement，也就是普通的img标签，具体要使用 FileReader构造函数。

先new出来一个img和fileReader的实例，通过fileReader的 readAsDataURL这个api，来读取图片文件，其返回值是一个编码后的base64的字符串，然后将这个字符串赋值给img的src属性上，这样就完成了图片文件到 HTMLImageElement的转化。

1. // 先new一个img和fileReader的实例
2. const img = new Image()
3. const reader = new FileReader()// 读取文件资源
4. reader.readAsDataURL(file)
5. reader.onload = function(e){
6. img.src = e.target.result
7. }

转化的HTMLImageElement

3. canvas压缩，核心步骤

拿到转化后的img元素后，先取出该元素的宽高度，这个宽高度就是实际图片文件的宽高度。

1. const { width: originWidth, height: originHeight } = img

然后定义一个最大限度的宽高度，如果超过这个限制宽高度，则进行等比例的缩放

1. // 最大尺寸限制
2. const maxWidth = 1000,maxHeihgt = 1000
3. // 需要压缩的目标尺寸
4. let targetWidth = originWidth, targetHeight = originHeight
5. // 等比例计算超过最大限制时缩放后的图片尺寸
6. if (originWidth > maxWidth || originHeight > maxHeight) {
7. if (originWidth / originHeight > 1) {
8. // 宽图片
9. targetWidth = maxWidth
10. targetHeight = Math.round(maxWidth * (originHeight / originWidth))
11. } else {
12. // 高图片
13. targetHeight = maxHeight
14. targetWidth = Math.round(maxHeight * (originWidth / originHeight))
15. }
16. }

计算好将要压缩的尺寸后，创建canvas实例，设置canvas的宽高度为压缩计算后的尺寸，并将img绘制到上面

1. // 创建画布
2. const canvas = document.createElement('canvas')
3. const context = canvas.getContext('2d')
4.  
5. // 设置宽高度为等同于要压缩图片的尺寸
6. canvas.width = targetWidth
7. canvas.height = targetHeight
8. context.clearRect(0, 0, targetWidth, targetHeight)
9. //将img绘制到画布上
10. context.drawImage(img, 0, 0, targetWidth, targetHeight)

4. 转成blob文件

canvas绘制完成后，就可以使用 toBlob来将图像转成blob文件了，这个api接受三个入参

1. canvas.toBlob(callback, type, encoderOptions);

回调函数中可以得到转化后的blob文件，type为要转成的图片类型，默认png。

encoderOptions为当设置的图片格式为 image/jpeg 或者 image/webp 时用来指定图片展示质量。

所以如果我们只是要压缩jpg或者webp格式的图片的话，不需要进行第3部的操作，直接使用这个api，然后填入想要的质量参数就可以了。但实际上，我们还是要考虑多种的图片格式，因此很有必要使用第三部的过程。

转成的blob长这个样子

5. 将blob上传，大功告成。

完整的代码实现

因为整个过程中都存在着异步回调操作，所以我使用了async，实现异步代码的同步执行

1. // 压缩前将file转换成img对象
2. function readImg(file) {
3. return new Promise((resolve, reject) => {
4. const img = new Image()
5. const reader = new FileReader()
6. reader.onload = function(e) {
7. img.src = e.target.result
8. }
9. reader.onerror = function(e) {
10. reject(e)
11. }
12. reader.readAsDataURL(file)
13. img.onload = function() {
14. resolve(img)
15. }
16. img.onerror = function(e) {
17. reject(e)
18. }
19. })
20. }

1. /**
2. * 压缩图片
3. *@param img 被压缩的img对象
4. * @param type 压缩后转换的文件类型
5. * @param mx 触发压缩的图片最大宽度限制
6. * @param mh 触发压缩的图片最大高度限制
7. */
8. function compressImg(img, type, mx, mh) {
9. return new Promise((resolve, reject) => {
10. const canvas = document.createElement('canvas')
11. const context = canvas.getContext('2d')
12. const { width: originWidth, height: originHeight } = img
13. // 最大尺寸限制
14. const maxWidth = mx
15. const maxHeight = mh
16. // 目标尺寸
17. let targetWidth = originWidth
18. let targetHeight = originHeight
19. if (originWidth > maxWidth || originHeight > maxHeight) {
20. if (originWidth / originHeight > 1) {
21. // 宽图片
22. targetWidth = maxWidth
23. targetHeight = Math.round(maxWidth * (originHeight / originWidth))
24. } else {
25. // 高图片
26. targetHeight = maxHeight
27. targetWidth = Math.round(maxHeight * (originWidth / originHeight))
28. }
29. }
30. canvas.width = targetWidth
31. canvas.height = targetHeight
32. context.clearRect(0, 0, targetWidth, targetHeight)
33. // 图片绘制
34. context.drawImage(img, 0, 0, targetWidth, targetHeight)
35. canvas.toBlob(function(blob) {
36. resolve(blob)
37. }, type || 'image/png') })
38. }

大致执行过程，具体可根据需求，自行改动

1. async function upload(file){
2. const img = await readImg(file)
3. const blob = await compressImg(img, file.type, 1000, 1000)
4. const formData = new FormData()
5. formData.append('file', blob, 'xxx.jpg')
6. axios.post('http://xxx.com/api',formData)
7. }
8. upload(file).catch(e => console.log(e))

到此这篇关于JavaScript前端实现压缩图片功能的文章就介绍到这了,更多相关JavaScript 压缩图片内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！