图片视频上传压缩的考察

2024-02-08 06:44

本文主要是介绍图片视频上传压缩的考察,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

上传

  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。
  1. 以码率3M为准
  • 20s:20*3/8=7.5M。
  • 30s:30*3/8=11.25M。

参考网站

  1. 亚马逊
  • 上传限制100M ,10分钟内。
  • 格式avi / flv / mov / mpg / wmv
  1. OPPO
    下载视频5.2MB,16s,720p
    码率:5.2MB / 15s ≈ 346,667 bps ≈ 0.35MB。
  2. SONY
    上传至第三方视频网站Youtube,不考虑压缩问题。
  3. 其他
    上传到服务器压缩,比如阿里云,或者后端找工具实现。
    假设限制视频的大小是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
  1. 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. 格式尺寸错误(客户端错误)

这篇关于图片视频上传压缩的考察的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/690200

相关文章

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因?

视频智能分析/视频监控/安防监控综合管理系统EasyCVR视频汇聚融合平台,是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。该平台以其强大的视频处理、汇聚与融合能力,在构建全栈视频监控系统中展现出了独特的优势。视频监控管理系统EasyCVR平台内置了强大的视频解码、转码、压缩等技术,能够处理多种视频流格式,并以多种格式(RTMP、RTSP、HTTP-FLV、WebS

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

hdu1565(状态压缩)

本人第一道ac的状态压缩dp,这题的数据非常水,很容易过 题意:在n*n的矩阵中选数字使得不存在任意两个数字相邻,求最大值 解题思路: 一、因为在1<<20中有很多状态是无效的,所以第一步是选择有效状态,存到cnt[]数组中 二、dp[i][j]表示到第i行的状态cnt[j]所能得到的最大值,状态转移方程dp[i][j] = max(dp[i][j],dp[i-1][k]) ,其中k满足c

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

LntonAIServer视频质量诊断功能中的抖动检测是一个专门针对视频稳定性进行分析的功能。抖动通常是指视频帧之间的不必要运动,这种运动可能是由于摄像机的移动、传输中的错误或编解码问题导致的。抖动检测对于确保视频内容的平滑性和观看体验至关重要。 优势 1. 提高图像质量 - 清晰度提升:减少抖动,提高图像的清晰度和细节表现力,使得监控画面更加真实可信。 - 细节增强:在低光条件下,抖

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中,在进行一些平板等默认横屏的设备开发的过程中,需要在进入camera2的 时候,默认预览图像也是需要横屏显示的,在上一篇已经实现了横屏预览功能,然后发现横屏预览后,拍照保存的图片 依然是竖屏的,所以说同样需要将图片也保存为横屏图标了,所以就需要看下mtk的camera2的相关横屏保存图片功能, 如何实现实现横屏保存图片功能 如图所示: 2.mtk

Spring MVC 图片上传

引入需要的包 <dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-

《x86汇编语言:从实模式到保护模式》视频来了

《x86汇编语言:从实模式到保护模式》视频来了 很多朋友留言,说我的专栏《x86汇编语言:从实模式到保护模式》写得很详细,还有的朋友希望我能写得更细,最好是覆盖全书的所有章节。 毕竟我不是作者,只有作者的解读才是最权威的。 当初我学习这本书的时候,只能靠自己摸索,网上搜不到什么好资源。 如果你正在学这本书或者汇编语言,那你有福气了。 本书作者李忠老师,以此书为蓝本,录制了全套视频。 试

Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown 0. 引言1. 提示词2. 原始版本 0. 引言 最近尝试将图片中的表格转换成Markdown格式,需要不断条件和优化提示词。记录一下调整好的提示词,以后在继续优化迭代。 1. 提示词 英文版本: You are an AI assistant tasked with extracting the content of

SAM2POINT:以zero-shot且快速的方式将任何 3D 视频分割为视频

摘要 我们介绍 SAM2POINT,这是一种采用 Segment Anything Model 2 (SAM 2) 进行零样本和快速 3D 分割的初步探索。 SAM2POINT 将任何 3D 数据解释为一系列多向视频,并利用 SAM 2 进行 3D 空间分割,无需进一步训练或 2D-3D 投影。 我们的框架支持各种提示类型,包括 3D 点、框和掩模,并且可以泛化到不同的场景,例如 3D 对象、室