图片&视频上传压缩的考察

本文仅做上传 / 纯客户端压缩功能的调研

上传

1. 能否在上传时就限制图片的张数？移动端不能使图库变成禁止状态，用户点击完成之后才能进行校验。

2. 能否限制上传的文件格式？可以限制，PC端能够完美限制，移动端只能部分限制，限制上传图片，IOS会将txt等文件禁用，但是安卓机不会，仍然能上传txt，手机上传中会无accept='image/jpeg,image/jpg,image/png属性。
   选择之后必须再进行校验提示。
   可考虑做移动 / PC端不同配置。

3. 实现方式
   采用<input type='file' multiple='multiple' />实现，不限制格式。
   参考https://tinypng.com/。

安卓机上表现：可以选择相册、照片、文件，但是外层一次只能选择一张，进入图库内层可以选择多张。
IOS上表现：可以正常选择多张。

采用<input type='file' accept='image/*,video/*' multiple onChange={onChange} />实现。
调用样式IOS正常，安卓先要选择文件，才能调用相册。
4. 上传过程可使用axios的onUploadProgress获取上传进度。

视频压缩

压缩工具

• fluent-ffmpeg：一个用于处理和压缩视频的npm包，支持多种视频格式，如MP4、MOV、AVI等。
• ffmpeg.wasm
  不考虑wasm，纯前端方式无法压缩视频，需要传到服务端再压缩。

压缩参数

• 帧率：指的的视频每秒钟播放的图片数目，帧率越小，那么你看到的视频就会越卡，动作就不连贯。一般25fps是常用的视频尺寸。
• 码率(比特率)：就是数据传输时单位时间传送的数据位数,一般我们用的单位是kbps即千位每秒，通俗一点的理解就是取样率，单位时间内取样率越大，精度就越高，处理出来的文件就越接近原始文件，当然不是越大越好。这样只会增加数据量，浪费内存。
• 分辨率：就是视频的尺寸大小，如标准的720P视频就是每一横排有1280个像素，每一列有720个像素，总的像素就是1280x720个，这个乘积即是视频的分辨率。一般情况下，分辨率越大，视频就越清晰。清晰度由码率决定，视频尺寸和像素量由分辨率决定。码率越高越清晰（前提是分辨率保持不变），分辨率越大视频尺寸越大。

mp4视频文件压缩率大概是多大：https://blog.csdn.net/xiaozaq/article/details/109378302

1. 以码率5M为准，1s 24帧

• 20s：
  视频大小：20s*5Mb = 100Mb ， 100 / 8 = 12.5 MB ，大概12.5M。
• 30s：
  视频大小：大概18.75 MB。

2. 以码率3M为准

• 20s：20*3/8=7.5M。
• 30s：30*3/8=11.25M。

参考网站

1. 亚马逊

• 上传限制100M ，10分钟内。
• 格式avi / flv / mov / mpg / wmv

2. OPPO
   下载视频5.2MB，16s，720p
   码率：5.2MB / 15s ≈ 346,667 bps ≈ 0.35MB。
3. SONY
   上传至第三方视频网站Youtube，不考虑压缩问题。
4. 其他
   上传到服务器压缩，比如阿里云，或者后端找工具实现。
   假设限制视频的大小是100MB，20s，视频码率大概是40M
   如果30秒，则视频码率大概是 100 MB * 8 / 30 s = 26.7 M

图片压缩画质 & 最大上传限制 & 压缩工具

存储方案

1. 原图压缩，只存储一张压缩的原图，小图的展示压缩通过阿里云提供自动裁剪方式实现。
   阿里云的压缩文档：https://help.aliyun.com/document_detail/44688.html?spm=5176.8465980.quota-list.1.6aff1450PcUeZX
   注意点：
2. 可支持压缩png , jpg格式（由压缩工具决定），压缩完毕后图片格式仍然保留。
3. 最终采用：图片存储一张压缩后的原图、一张canvas裁剪后的正方形预览图，数据库保存两个版本的url数据，届时可直接获取。

压缩工具

1. canvas压缩，canvas提供toBlob的压缩canvas.toDataURL(‘image/jpeg’, quality) 压缩算法由浏览器内部实现，不同浏览器实现不同。（除了算法压缩、尺寸压缩也是一个压缩标准）
2. 其他涉及第三方压缩服务器、仅供服务器使用的依赖暂不考虑。

• imagemin
• sharp

3. wasm的压缩工具- 暂不考虑。

canvas压缩效果

以谷歌 PC为例测试canvas压缩效果：（长宽不变）

• JPG1:508.11k
  1：567k
  0.9：131K
  0.8：87.8K

• JPG2:700K
  1: 768K
  0.9: 174k
  0.8: 117K
  0.6: 77.9k

• webp：webp可以压缩，效果类比jpg

• PNG 224k 只能通过调整尺寸压缩
  1: 231k
  0.9: 231k
  0.8: 231K

？？？？？看完png我就是一个皱眉，啊？canvas压缩png原来这么拉？那看来canvas压缩不能用了。

参考网站

1. goPro

• 压缩图仅13K，上传时做了自动裁剪，取中间的正方形。
• 下载原图600K，不能识别压缩比例。
  OPPO
• 阿里云自动裁剪方案，不确定是否压缩。

错误处理

1. 超时错误。
2. 上传失败错误。（服务器错误）
3. 格式尺寸错误（客户端错误）