let video = document.createElement('video');
video.style="width:0;height:0;position:fixed;right:-100%;"
video.muted = 'muted';
video.autoplay = 'autoplay';
video.onloadeddata = function() {
let { width, height } = getVideoSize(120, this.videoWidth, this.videoHeight);
let canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 视频转换为图片
canvas.toDataURL('image/png')
document.body.removeChild(video);
}
video.src = URL.createObjectURL(file.files[0]); // file本地文件
document.body.appendChild(video);
// 获取视频等比缩放宽高
function getVideoSize(maxWidth, width, height) {
if(maxWidth >= width) {
return {
width,
height
}
} else {
return {
width: maxWidth,
height: Math.floor(maxWidth / width * height)
}
}
}
当前位置:网站首页>通过canvas获取视频第一帧封面图
通过canvas获取视频第一帧封面图
2020-11-08 23:46:00 【action】
版权声明
本文为[action]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000037765094
边栏推荐
- [cloud service] there are so many ECS instances on alicloud server, how to select the type? Best practice note
- 老大问我:“建表为啥还设置个自增 id ?用流水号当主键不正好么?”
- C/C++编程笔记:指针篇!从内存理解指针,让你完全搞懂指针
- Django之简易用户系统(3)
- Suffix expression to infix expression
- RSA asymmetric encryption algorithm
- VIM 入门手册, (VS Code)
- 实验一作业
- Computer network application layer
- Python的特性与搭建环境
猜你喜欢
随机推荐
Infix expression to suffix expression
几行代码轻松实现跨系统传递 traceId,再也不用担心对不上日志了!
Development and deployment of image classifier application with fastai
Are there many Python application scenarios?
LeetCode 45 跳跃游戏II
Array acquaintance
STC转STM32第一次开发
How to analyze Android anr problems
Django's simple user system (3)
Aprelu: cross border application, adaptive relu | IEEE tie 2020 for machine fault detection
构造回文的最小插入次数
.NET Core 跨平台资源监控库及 dotnet tool 小工具
CMS垃圾收集器
Python features and building environment
小议缓冲区溢出
Solve the failure of go get download package
计算机网络 应用层
采用注解+拦截器的方式进行异步执行的实现方式
What are the basic requirements for big data posts?
深拷贝