前端实现图片或视频预览的3种方法
前端实现图片或视频预览的3种方法
1. 通过上传服务器实现预览
上传服务器是早期经常使用的方法,主要思想就是先把图片视频资源,通过ajax请求上传到服务端,然后服务端返回一个视频路径,前端使用这个路径即可加载出资源并实现预览。
因为H5之前,前端是没办法操作文件的,此方法也是唯一可靠的资源预览方法。但确实有很多弊端:
- 预览前必须先将资源上传至服务端,如果资源过大,导致上传时间过长,资源预览加载时间也过长,影响用户体验。
- 如果用户只是想预览,并不上传,然而资源已经上传,这就造成内存空间以及网络资源的浪费。
2. 将资源转换为base64格式
H5之后,前端有了自己的file对象,终于可以自己操作文件。同时FileReader对象中的readAsDataURL 方法会读取指定的 Blob 或 File 对象,更是让我们可以实现纯前端的图片操作。
具体代码如下:
<input type="file" id="videoInput">
<video src="" alt="预览" id="video" controls="controls">
<script>const videoInput = document.getElementById('videoInput');videoInput.addEventListener('change', e => {previewByReader(e.target.files[0])})function previewByReader (file) {const fileReader = new FileReader()fileReader.readAsDataURL(file)fileReader.onload = (e) => {console.log(e.target)video.src = e.target.result}}
</script>
new一个FileReader
实例,我们可以使用实例的readerAsDataURL
方法读取某个文件,读取完成后通过监听onload
事件,我们我们可以获取到读取的结果,一个FileReader
对象,它的result
属性就是我们想要的base64格式。
最终设置video元素的src实现预览:
当然前端转换base64的方法很多,也可以通过canvas或者其他前端插件来实现都是可以的。
通过blob协议实现预览
再base64实现预览中,我特意选择了一个较大的视频,实践过的同学可能也会发现,base64操作需要花费一定时间。如果资源足够大,将花费较长时间,影响用户体验,这就是体现blob协议优点的时候了。
先介绍用法:
<input type="file" id="videoInput"><video src="" alt="预览" id="video" controls="controls" width="400" height="200"><script>const videoInput = document.getElementById('videoInput');videoInput.addEventListener('change', e => {previewByURL(e.target.files[0])})function previewByURL (file) {video.src = URL.createObjectURL(file)}</script>
可以看到,blob主要是通过URL对象上的createObjectURL方法创建一个地址,直接设置给video.src即可,用法非常简单,仅需一行代码。接下来我们看下html重的video.src到底是什么:
可以看到,使用blob协议的一个url,这个 URL 临时缓存起来,一旦网页刷新或卸载,这个 URL 就失效。除此之外,也可以手动调用 URL.revokeObjectURL
方法,使 URL 失效。
window.URL.revokeObjectURL(objectURL);
前端实现图片或视频预览的3种方法相关推荐
- 如何实现上传多个图片并依次展示_js前端实现多图图片上传预览的两个方法(推荐)...
一.将图片转成icon码的实现方式 html代码: js代码 //图片预览功能 function previewImage(file,imgNum) { var MAXWIDTH = 200; var ...
- java 上传图片,图片预览,2种方法
java 上传图片,图片预览,2种方法 1. 方法一:将图片上传到特定磁盘 html页面,form表单内容: <div class="layui-form-item"> ...
- 图片上传预览的几种方式,了解下?
图片上传预览场景基本处处可见,朋友圈发动态配图,身份验证及头像更新,莫过如斯. 原由 最近在研究twitter PC网站的时候,在个人中心的主页,设置个人的背景图的时候,发现twitter有个非常好的 ...
- python与html交互实现图片上传_python 实现上传图片并预览的3种方法(推荐)
在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内 ...
- Qt实现Qchart的打印和打印预览的几种方法
实现打印预览和打印,是挺常用的功能.把其他一些内容如QTextBrowser或者QEditText打印和打印预览是容易的,因为它们都自带了print方法,可以直接输出到printer.这里介绍下Qt实 ...
- (0095)iOS开发之本地文件预览的三种方法(3)
(0090)iOS开发之本地文件预览的三种方法(1) (0094)iOS开发之本地文件预览的三种方法(2) 用功能强大的Webview来实现文件预览功能 我导入的 ios.pdf 前两种可以打开,但是 ...
- (0094)iOS开发之本地文件预览的三种方法(2)
(0090)iOS开发之本地文件预览的三种方法(1) (0095)iOS开发之本地文件预览的三种方法(3) QuickLook预览文件 quickLook预览文件也是系统提供的预览方法,具体使用如下 ...
- js前端实现多图图片上传预览的两个方法
一.将图片转成icon码的实现方式,手动多个 效果图: 代码片段: <!DOCTYPE html> <html lang="zh-cn"> <head ...
- (0090)iOS开发之本地文件预览的三种方法(1)
UIDocumentInteractionController是OC语言的一个类,但是他并不是一个controller,而是一个继承自NSObject类. UIDocumentInteractionC ...
- Layui.open 弹出上传图片、视频预览
Layui.open弹出图片及视频预览 图片预览 视频预览 图片预览 注:imgHtml 外部不加div时,如果图片是一张长图,则预览效果非常不好,加了div弹出层有滚动条,可以很方便的预览长图. h ...
最新文章
- EF具体用在什么类型的项目上
- Spring Boot + Mybatis 实现动态数据源
- PE文件结构详解(四)PE导入表
- bootstrap table footerFormatter用法 统计列求和 sum、average等
- 在Linux中对硬盘进行分区、格式化和挂载
- android xml 设置图片,android 的几种图片效果xml写法
- Summarize to the Power of Two(CF-1005C)
- windows 安装tensorflow
- STM32工作笔记0076---UCOSIII任务基础API_任务创建和删除
- 2011总结与2012展望
- spark读写Oracle、hive的艰辛之路(一)
- SQLServer 2016安装时的错误:Polybase要求安装Oracle JRE 7更新51或更高版本
- 局域网ip扫描工具_树莓派无屏幕自动获取IP诸方法
- 硬盘突然变raw格式_硬盘突然变成RAW格式解决办法
- 键盘忍者:无需鼠标即可启动任何应用程序
- 你TM管这着玩意儿叫H5编辑器?????
- 微服务组件之限流器与熔断器
- 使用Pytorch框架
- 通知:首届CISM大赛华东赛区决赛将于30日在马鞍山举行
- Vue中获取当前点击元素的父元素、子元素、兄弟元素