Vue+canvas实现视频截图功能

3403771864 发布于2022-09-12 18:27 / 639人阅读

　　上传视频要提供视频封面（视频封面必填），这是在开发中实际问题。封面可以用户自己制作并上传，但这样脱离网站，体验不好，常见的处理方案就是用户未选择或上传封面时，自动截取视频第一帧作为封面，但这样并不友好。因此考虑视频上传后，在播放中由人员自行截取画面作为视频封面。

　　简单效果如图：

　　前端代码如下：

　　<template>
　　<div>
　　<video src="https://{{视频地址}}.mp4"
　　crossOrigin="Anonymous" controls style="width:300px;"></video>
　　<img :src="imgSrc">
　　<div>
　　<el-button @click="cutPicture">
　　截图
　　</el-button>
　　</div>
　　<canvas id="myCanvas" width="343" height="200"></canvas>
　　</div>
　　</template>
　　<script>
　　export default {
　　name: 'video',
　　data () {
　　return {
　　imgSrc: '',
　　videoData:{},
　　}
　　},
　　methods: {
　　//截取当前帧的图片
　　cutPicture () {
　　let self = this
　　var v = document.querySelector('video')
　　let canvas = document.getElementById('myCanvas')
　　// canvas.setAttribute("crossOrigin",'Anonymous')
　　var ctx = canvas.getContext('2d')
　　ctx.drawImage(v, 0, 0, 343, 200)
　　var oGrayImg = canvas.toDataURL('image/jpeg')
　　// this.imgSrc = oGrayImg
　　// axios请求，将截图传给后端API
　　this.$axios.post('test/upload', {file: oGrayImg})
　　},
　　}
　　}
　　</script>

专线服务服务器托管 js视频截图功能 html5视频截图功能 vue+webrtc实现实时视频通话,语音通话 html5截图功能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127665.html

一步一步搭建前端监控系统：如何将网页截图上报？

摘要：目前已经在运行的线上前端监控系统代码和讲解都放在这篇文章里监控系统介绍及代码用户对前端程序员来说，就是一个黑匣子。摘要：通过录屏或者截图，快速复现BUG场景。作者：一步一个脚印一个坑原文：搭建前端监控系统（备选）Js截图上报篇 Fundebug经授权转载，版权归原作者所有。 PS：本文关于Fundebug录屏功能的内容有些不准确的地方，比如录屏并非通过截图实现的，录屏插件...

Martin91 2019-08-26 10:21 评论0 收藏0
vue项目中canvas实现截图功能

　　在vue项目中canvas实现截图功能是常用的，下面是具体代码：　　实现效果：　　在vue项目中做的一个截图功能（只能够截取图片），只用鼠标就可以在画面中进行框选截取。　　实现：做一个弹窗，打开弹窗的时候传入要截的图，接下来在这个窗口里面，点击截图按钮，开始截图；点击取消按钮，取消截图。　　窗口里面的html主要是三个部分，一个是可截图区域，一个是截取图片的回显，一个是操作按钮（截图按钮和取消...

3403771864 2022-09-12 18:47 评论0 收藏0
实现Google带截图功能的web反馈插件

摘要：谷歌是通过来实现这个组件的，比较复杂谷歌的工具加载文件和截图文件有兴趣的同学可以看一下。高亮区域核心部分截图搞定了，接下来就是高亮区域了。几乎所有的APP应用包括Web应用都需要一个意见反馈，这样才能了解用户对产品的意见和建议，以便于不断提升完善自己的产品。目前的反馈组件一般有两种，一种是打开一个反馈页面填写表单，另一种则是通过弹窗来完成，相比较而言第二种更加方便，而且更加容易组件化...

freecode 2019-08-22 17:20 评论0 收藏0
学习实践 - 收藏集 - 掘金

摘要：官网地址聊天机器人插件开发实例教程一创建插件在系统技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。我会简单基于的简洁视频播放器组件前端掘金使用和实现购物车场景前端掘金本文是上篇文章的序章，一直想有机会再次实践下。 2道面试题：输入URL按回车&HTTP2 - 掘金通过几轮面试，我发现真正那种问答的技术面，写一堆项目真不如去刷技术文章作用大，因此刷了一段时间的博客和掘金，整理下曾经被...

mikyou 2019-08-29 12:50 评论0 收藏0
记一次“失利后”经过半年准备通过阿里社招的经历与感悟

摘要：写在最前本次分享一下在作者上一次失利即拿到毕业证第二天突然收到阿里社招面试通知失败之后，通过分析自己的定位与实际情况，做出的未来一到两年的规划。在博客有一定曝光度的积累中，陆续收到了一些面试邀请，基本上是阿里的但是我知道我菜。。写在最前本次分享一下在作者上一次失利即拿到毕业证第二天突然收到阿里社招面试通知失败之后，通过分析自己的定位与实际情况，做出的未来一到两年的规划。以及本次社招...

malakashi 2019-08-26 11:36 评论0 收藏0