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

这篇具有很好参考价值的文章主要介绍了canvas截取视频图像(图文示例)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

canvas截取视频图像(图文示例),# canvas示例教程100+,音视频,canvas截屏,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)
参数图示
canvas截取视频图像(图文示例),# canvas示例教程100+,音视频,canvas截屏,canvas截图视频图像
这里面的image可以是video。 在实例中设置了video的id video555, image可以替换为video555. 或者采用video=document.getElementById(‘video555’); image替换为video也是可以的。

示例效果图

canvas截取视频图像(图文示例),# canvas示例教程100+,音视频,canvas截屏,canvas截图视频图像文章来源地址https://www.toymoban.com/news/detail-799664.html

示例源代码(共90行)

/*
* @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()

到了这里,关于canvas截取视频图像(图文示例)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • canvas绘制图片的三种方法(图文示例)

    查看专栏目录 canvas示例教程100+专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重要的帮助。 如何使用canvas来绘制图片呢?这里有三种方法。 d

    2024年01月16日
    浏览(51)
  • canvas绘制不同样式的五角星(图文示例)

    查看专栏目录 canvas实例应用100+专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重要的帮助。 如何使用canvas绘制不同样式的五角星呢?这里面要确

    2024年01月18日
    浏览(53)
  • 图文文案音视频素材库流量主小程序开发

    适用于全行业的资源素材运营变现小程序,支持文档、图片、文件、图文、音视频、网盘等多种资源形式,多种功能组合运营变现的小程序。 适用领域: 公司/微商素材、学习/考研/论文资料分享、PPT模板/背景图/壁纸/头像、知识付费、抖音素材等等。 支持一键复制下载图文

    2024年02月07日
    浏览(43)
  • 全志F1C100s主线linux入坑记录 (6)音视频播放(视频播放软解)

    百度网站 (1)下载安装声卡补丁 参考挖坑网大神提供的声音驱动以及声音卡驱动补丁文件下载文件下载 全志F1C100s声卡补丁 解压文件打上补丁 (2)配置声卡 修改设备树文件添加声卡节点 内核配置 (3)linux内核编译烧录 可以看到声卡已经挂载了 (4)使用声卡 安装alsa-u

    2024年02月07日
    浏览(53)
  • WebRTC音视频采集和播放示例及MediaStream媒体流解析

    示例代码——同时打开摄像头和麦克风,并在页面显示画面和播放捕获的声音 API解析 mediaDevices MediaStream媒体流 代码 效果 1. mediaDevices mediaDevices 是 Navigator 只读属性,返回一个 MediaDevices 对象,该对象可提供对相机和麦克风等媒体输入设备的连接访问,也包括屏幕共享。 语法

    2023年04月08日
    浏览(37)
  • canvas详解03-绘制图像和视频

    canvas 更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等。浏览器支持的任意格式的外部图片都可以使用,比如 PNG、GIF 或者 JPEG。你甚至可以将同一个页面中其他 canvas 元素生成的图片作为图片源。 引入图像到

    2024年02月11日
    浏览(40)
  • vue2实现截取视频第一帧图像作为开始封面

    要在Vue中实现截取视频的第一帧作为封面,你可以使用HTML5的元素和Canvas API来实现。loadeddata事件监听必须在视频加载完成后执行,然后通过Canvas的drawImage方法将视频帧绘制到Canvas上,并使用toDataURL方法将Canvas内容转换为Base64编码的图像数据URL 在你的Vue组件中,使用元素来加

    2024年02月12日
    浏览(36)
  • 【图像处理】音视频色彩:RGB/YUV

    目录 1.RGB  1.1介绍        1.2分类 1.2.1RGB16 1)RGB565 2)RGB555 1.2.2RGB24 1.2.3RGB222 /

    2024年02月20日
    浏览(47)
  • 从数字图像到音视频学习:我的学习之旅

    数字图像是一门广泛应用于计算机视觉、图像处理和计算机图形学等领域的学科,而音视频学习则涵盖了音频和视频的处理、分析和应用。 如果你最开始接触数字图像,可能会学习一些基本概念,例如像素、分辨率、色彩空间和图像处理算法等。这可能涉及到使用编程语言(

    2024年02月11日
    浏览(47)
  • 从文本、图像到音视频,AIGC技术将如何重构我们的数字世界?

    1950 年,艾伦·图灵提出著名的「图灵测试」,给出判定机器是否具有智能的试验方法。16 年后,世界上第一款可人机对话的机器人“Eliza”问世,这是 AI 技术最早期的萌芽阶段。但由于当时的科技水平限制,AIGC 仅限于小范围实验。 Eliza 的出现代表了人们对人工智能和自然语

    2024年02月15日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包