本文仅做上传 / 纯客户端压缩功能的调研
上传
能否在上传时就限制图片的张数?移动端不能使图库变成禁止状态,用户点击完成之后才能进行校验。
能否限制上传的文件格式?可以限制,PC端能够完美限制,移动端只能部分限制,限制上传图片,IOS会将txt等文件禁用,但是安卓机不会,仍然能上传txt,手机上传中会无
accept='image/jpeg,image/jpg,image/png
属性。
选择之后必须再进行校验提示。
可考虑做移动 / PC端不同配置。实现方式
采用实现,不限制格式。
参考https://tinypng.com/。
安卓机上表现:可以选择相册、照片、文件,但是外层一次只能选择一张,进入图库内层可以选择多张。
IOS上表现:可以正常选择多张。
采用实现。
调用样式IOS正常,安卓先要选择文件,才能调用相册。
4. 上传过程可使用axios的onUploadProgress获取上传进度。
视频压缩
压缩工具
- fluent-ffmpeg:一个用于处理和压缩视频的npm包,支持多种视频格式,如MP4、MOV、AVI等。
- ffmpeg.wasm
不考虑wasm,纯前端方式无法压缩视频,需要传到服务端再压缩。
压缩参数
- 帧率:指的的视频每秒钟播放的图片数目,帧率越小,那么你看到的视频就会越卡,动作就不连贯。一般25fps是常用的视频尺寸。
- 码率(比特率):就是数据传输时单位时间传送的数据位数,一般我们用的单位是kbps即千位每秒,通俗一点的理解就是取样率,单位时间内取样率越大,精度就越高,处理出来的文件就越接近原始文件,当然不是越大越好。这样只会增加数据量,浪费内存。
- 分辨率:就是视频的尺寸大小,如标准的720P视频就是每一横排有1280个像素,每一列有720个像素,总的像素就是1280×720个,这个乘积即是视频的分辨率。一般情况下,分辨率越大,视频就越清晰。清晰度由码率决定,视频尺寸和像素量由分辨率决定。码率越高越清晰(前提是分辨率保持不变),分辨率越大视频尺寸越大。
mp4视频文件压缩率大概是多大:https://blog.csdn.net/xiaozaq/article/details/109378302
- 以码率5M为准,1s 24帧
- 20s:
视频大小:20s*5Mb = 100Mb , 100 / 8 = 12.5 MB ,大概12.5M。 - 30s:
视频大小:大概18.75 MB。
- 以码率3M为准
- 20s:20*3/8=7.5M。
- 30s:30*3/8=11.25M。
参考网站
- 亚马逊
- 上传限制100M ,10分钟内。
- 格式avi / flv / mov / mpg / wmv
- OPPO
下载视频5.2MB,16s,720p
码率:5.2MB / 15s ≈ 346,667 bps ≈ 0.35MB。 - SONY
上传至第三方视频网站Youtube,不考虑压缩问题。 - 其他
上传到服务器压缩,比如阿里云,或者后端找工具实现。
假设限制视频的大小是100MB,20s,视频码率大概是40M
如果30秒,则视频码率大概是 100 MB * 8 / 30 s = 26.7 M
图片压缩画质 & 最大上传限制 & 压缩工具
存储方案
- 原图压缩,只存储一张压缩的原图,小图的展示压缩通过阿里云提供自动裁剪方式实现。
阿里云的压缩文档:https://help.aliyun.com/document_detail/44688.html?spm=5176.8465980.quota-list.1.6aff1450PcUeZX
注意点: - 可支持压缩png , jpg格式(由压缩工具决定),压缩完毕后图片格式仍然保留。
- 最终采用:图片存储一张压缩后的原图、一张canvas裁剪后的正方形预览图,数据库保存两个版本的url数据,届时可直接获取。
压缩工具
- canvas压缩,canvas提供toBlob的压缩canvas.toDataURL(‘image/jpeg’, quality) 压缩算法由浏览器内部实现,不同浏览器实现不同。(除了算法压缩、尺寸压缩也是一个压缩标准)
- 其他涉及第三方压缩服务器、仅供服务器使用的依赖暂不考虑。
- imagemin
- sharp
- wasm的压缩工具- 暂不考虑。
canvas压缩效果
以谷歌 PC为例测试canvas压缩效果:(长宽不变)
JPG1:508.11k
1:567k
0.9:131K
0.8:87.8KJPG2:700K
1: 768K
0.9: 174k
0.8: 117K
0.6: 77.9kwebp:webp可以压缩,效果类比jpg
PNG 224k 只能通过调整尺寸压缩
1: 231k
0.9: 231k
0.8: 231K
?????看完png我就是一个皱眉,啊?canvas压缩png原来这么拉?那看来canvas压缩不能用了。
参考网站
- goPro
- 压缩图仅13K,上传时做了自动裁剪,取中间的正方形。
- 下载原图600K,不能识别压缩比例。
OPPO - 阿里云自动裁剪方案,不确定是否压缩。
错误处理
- 超时错误。
- 上传失败错误。(服务器错误)
- 格式尺寸错误(客户端错误)