canvas绘制视频封面--摘抄
一、需求:上传视频,同时截取视频某一帧作为视频的封面。 二、实现思路:利用canvas绘制图像的功能,绘制图像某一帧,这里绘制了第一帧,很简单就实现了。 三、代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>capture screen</title>
<style type="text/css">
video,#container{width: 300px;height: 200px;}
#container>img{width: 100%;}
</style>
</head>
<body>
<video id="video" controls="controls">
<source src="video/video_test.mp4">
</video>
<div id="container"></div>
<script type="text/javascript">
(function() {
var video, container;
var scale = 0.8;
var initialize = function() {
container = document.getElementById("container");
video = document.getElementById("video");
video.addEventListener('loadeddata', captureImage);
};
var captureImage = function() {
var canvas = document.createElement("canvas");
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
var img = document.createElement("img");
img.src = canvas.toDataURL("image/png");//转换成base64图片,地址拿出来就可以直接使用
container.appendChild(img);
};
initialize();
})();
</script>
</body>
</html>
canvas绘制视频封面--摘抄的更多相关文章
- 用canvas给视频图片添加特效
Canvas制作视频图片特效 1. Canvas介绍 1.1Canvas是html5上的一个画布标签,功能有点类似java的swing.可以在canvas上画线条 弧线, 文字 就是画布的功能. 具体 ...
- canvas绘制video
html <video style="position: relative; object-fit: fill;" preload="auto" id=& ...
- 一次js自定义播放器,canvas绘制弹幕的尝试
不多bb,就直接说实现了什么功能: 1. 视频播放进度调整 2. 视频小窗口实时预览 3. 声音调整 4. 画中画模式 5. 网页全屏 6. 视频全屏 7. canvas绘制弹幕 8. 选中弹幕悬停 ...
- canvas绘制图片drawImage学习
不得不说,html5中的canvas真的非常强大,从图片处理,到视频处理,再到游戏开发,都能见到canvas的身影,然而,就这一个<canvas>标签,功能居然如此强大,这主要归功于can ...
- 怎样用JavaScript和HTML5 Canvas绘制图表
原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装 用canvas绘制直线的函数--面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 学习笔记:HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
随机推荐
- JDBC连接数据库报错:java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone. ......
问题:Java程序使用JDBC连接MySQL数据库时,控制台报错如下: java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' ...
- 抓取oracle建表语句及获取建表ddl语句
抓取oracle建表语句及获取建表ddl语句 1.抓取代码如下: 1.1.产生表的语法资料 DECLARE-- v_notPartTable VARCHAR2(1000):= '&2'; -- ...
- 转 WebService两种发布协议--SOAP和REST的区别
转发文章 https://blog.csdn.net/zl834205311/article/details/62231545?ABstrategy=codes_snippets_optimize_v ...
- numpy中常用的函数
1. power(x1, x2) 对x1中的每个元素求n次方.不会改变x1上午shape. 2. sum(a, axis=None, dtype=None, out=None, keepdims=Fa ...
- Java的WatchService文件夹监听遇到的一些问题
打开word文档时会新增一个~$开头的同名文件,关闭时该文件自动删除 修改excel文件时,会新增一个文件名像E56B4610,CBC15610等这样的文件,同时也会产生tmp格式的文件 PPT文件修 ...
- Bootstrap 模态框 禁止点击空白关闭模态框事件
在模态框的div中加上 aria-hidden="true" data-backdrop="static" <div class="modal ...
- Docker 容器的网络连接 & 容器互联
1. Docker 容器网络基础架构 Docker0 ifconfig查看到的 docker0 是linux的虚拟网桥(OSI数据链路层) docker0 地址划分: 172.17.42.1 255. ...
- python学习之判断和循环的使用
作为一个小白运维,工作中常常发现很多东西还是自动化的好一点,所以就想到的用python来编写脚本.当然,我肯定是不会的啦,哈哈哈~~~~所以啦,身为一个懒癌晚期的上班族不得不在闲余时间来好好学学pyt ...
- vmware esxi 6.0 开启嵌套虚拟化
环境描述: 已通过vSphere Client创建一个名字为centos7的虚拟机,现在需要打开该虚拟机的嵌套虚拟化功能. 第一步: 开启ESXi Shell 开启vSphere的ssh远程登录服务或 ...
- Python虚拟机之异常控制流(五)
Python中的异常控制语义结构 在Python虚拟机之异常控制流(四)这一章中,我们考察了Python的异常在虚拟机中的级别上是什么东西,抛出异常这个动作在虚拟机的级别上对应的行为,最后,我们还剖析 ...