canvas截取视频图像(图文示例)

查看专栏目录

canvas示例教程100+专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重要的帮助。

文章目录

如何使用canvas截取视频图像呢?这里其实是监听了video的内容,将video的当前图像在canvas上面显示出来。

语法:

drawImage(image, dx, dy)

drawImage(image, dx, dy, dWidth, dHeight)

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

参数图示

这里面的image可以是video。 在实例中设置了video的id video555, image可以替换为video555. 或者采用video=document.getElementById('video555'); image替换为video也是可以的。

示例效果图

示例源代码(共90行)

javascript 复制代码
/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-01-16
*/
<template>
	<div class="djs_container">
		<div class="top">
			<h3>canvas截取视频图像(图文示例)</h3>
			<div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div>
			<h4>
				<el-button type="primary" size="mini" @click="clip()">截取当前视频图像</el-button>
				<el-button type="danger" size="mini" @click="clearCanvas()">清除</el-button>
			</h4>			
		</div>
		<div class="dajianshi ">
			<video id="video555" width="400" height="400" autoplay autobuffer muted loop>
			    <source src="data/demo.mp4" type="video/mp4">
			</video>
			<canvas id="dajianshi" ref="mycanvas" width="490" height="490"></canvas>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				ctx: null,
				canvas: null,
			}
		},
		mounted() {
			this.setCanvas()
		},
		methods: {
			clearCanvas() {
				this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
			},
			setCanvas() {
				this.canvas = document.getElementById('dajianshi');
				if (!this.canvas.getContext) return;
				this.ctx = this.canvas.getContext("2d");
			},
			clip() {
				this.clearCanvas()
				this.ctx.drawImage(video555, 50, 50, 100, 100);
				// 或者下面这种方式
				let video=document.getElementById('video555');
                this.ctx.drawImage(video, 200, 200, 280, 280);							  
			},
		}
	}
</script>

<style scoped>
	.djs_container {
		width: 1000px;
		height: 680px;
		margin: 50px auto;
		border: 1px solid #992299;
		position: relative;
	}

	.top {
		margin: 0 auto 0px;
		padding: 10px 0;
		background: #992299;
		color: #fff;
	}

	.dajianshi {
		margin: 5px auto 0;
		border: 1px solid #ccc;
		width: 980px;
		height: 490px;
		background-color: #f9f9f9;
	}
</style>

canvas基本属性

属性 属性 属性
canvas fillStyle filter
font globalAlpha globalCompositeOperation
height lineCap lineDashOffset
lineJoin lineWidth miterLimit
shadowBlur shadowColor shadowOffsetX
shadowOffsetY strokeStyle textAlign
textBaseline width

canvas基础方法

方法 方法 方法
arc() arcTo() addColorStop()
beginPath() bezierCurveTo() clearRect()
clip() close() closePath()
createImageData() createLinearGradient() createPattern()
createRadialGradient() drawFocusIfNeeded() drawImage()
ellipse() fill() fillRect()
fillText() getImageData() getLineDash()
isPointInPath() isPointInStroke() lineTo()
measureText() moveTo() putImageData()
quadraticCurveTo() rect() restore()
rotate() save() scale()
setLineDash() setTransform() stroke()
strokeRect() strokeText() transform()
translate()
相关推荐
Black蜡笔小新32 分钟前
WebRTC嵌入式视频通话SDK:EasyRTC从免插件到轻量级带来的音视频通话技术
音视频·webrtc·sdk·rtc·webp2p
EasyNVR34 分钟前
EasyRTC:开启智能硬件与全平台互动新时代
网络·音视频·webrtc·p2p·智能硬件·视频监控
EasyGBS35 分钟前
从开发到部署:EasyRTC嵌入式视频通话SDK如何简化实时音视频通信的集成与应用
音视频·webrtc·实时音视频·视频监控
AI服务老曹9 小时前
通过感知、分析、预测、控制,最大限度发挥效率的智慧油站开源了
人工智能·开源·自动化·音视频
St-sun9 小时前
短视频导演编导制片人编剧教程策划影视媒体电商摄影后期 知识总结
音视频·媒体
SKYDROID云卓小助手11 小时前
无人设备遥控器之视频回传篇
网络·人工智能·嵌入式硬件·目标检测·计算机视觉·音视频
EasyNVR13 小时前
智能硬件新时代,EasyRTC开启物联音视频新纪元
运维·服务器·音视频·webrtc·p2p·智能硬件·视频监控
X@AKS13 小时前
http 响应码影响 video 标签播放视频
网络协议·http·音视频
深耕AI15 小时前
使用DeepSeek自动获取视频双语字幕srt文件【工具说明】
音视频·deepseek
科技小E15 小时前
EasyRTC:智能硬件适配,实现多端音视频互动新突破
网络协议·安全·小程序·音视频·webrtc·p2p·视频监控