在vue中如何做到给视频拍照,留住那一帧的美好呢?

且看代码

<template>
<div>
<video src="../assets/video.mp4" controls style="width:300px;"></video>
<img :src="imgSrc">
<div>
<botton @click="cutPicture">
拍照
</botton>
</div>
<canvas id="myCanvas" width="343" height="200"></canvas>
</div>
</template>
<script>
export default {
name:"video",
data() {
return {
imgSrc:''
};
},
methods: {
//截取当前帧的图片
cutPicture(){
let self=this;
var v = document.querySelector("video");
let canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d');
ctx.drawImage(v, 0, 0, 343, 200);
var oGrayImg = canvas.toDataURL('image/jpeg');
this.imgSrc = oGrayImg
},
}
}
</script>

vue截取video视频中的某一帧的更多相关文章

  1. php如何截取出视频中的指定帧作为图片

    php如何截取出视频中的指定帧作为图片 一.总结 一句话总结:截取视频指定帧为图片,php ffmpeg扩展已经完美实现,并且php ffmpeg是开源的 二.php如何截取出视频中的指定帧作为图片 ...

  2. 用mplayer从视频中按周期提取帧

    使用方法:extract file time step folder time 设置时间长度 step 设置周期 均以秒(s)为单位 贡献:1. 从视频文件中周期性提取图片:2. Windows下批处 ...

  3. 利用OpenCV存储一段视频中的每一帧

    // vfc.cpp : 定义控制台应用程序的入口点.#include "stdafx.h"#include <opencv2/highgui/highgui.hpp> ...

  4. Dance GAN 迁移不同视频中人物动作的方法

    该研究提出一种迁移不同视频中人物动作的方法.给出两个视频,一个视频中是研究者想要合成动作的目标人物,另一个是被迁移动作的源人物,研究者通过一种基于像素的端到端流程在人物之间进行动作迁移(motion ...

  5. (转)[视频压制/转换技术] I帧 B帧 P帧 IDR帧 等帧用途详细说明

    转:http://www.u2game.net/bbs/thread-46116-1-1.html 在视频压制.转换中,经常会看到:I帧 B帧 P帧 IDR帧 等名词,这里就是通用的解释一下这些帧的用 ...

  6. vue 截取视频第一帧

    最近自己写项目,在项目中涉及功能点又截取视频帧的点:需求澄清:移动端封面展示,平台上传图片(多张上传)取第一张上传图片为封面图:如上传视频则截取视频第一帧作为封面图: 实现思路:h5  video标签 ...

  7. video字幕无法显示,video视频在google中无法控制快进

    video字幕(track)无法显示: 直接用关闭同源策略的浏览器打开你的HTML文件可以请求到字幕文件并显示字幕: 从hbuilder中打开html文件,在从里面打开google浏览器去浏览HTML ...

  8. 【实战问题】【3】iPhone无法播放video标签中的视频

    问题:视频都是MP4格式,视频可以在手机上正常播放.video标签中的视频在安卓点击可以播放,但在iPhone无法播放 解决方案: 1,视频编码格式问题,具体iPhone手机支持的是哪些格式可见官方的 ...

  9. ffmpeg截取一段视频中一段视频

    ffmpeg  -i ./plutopr.mp4 -vcodec copy -acodec copy -ss 00:00:10 -to 00:00:15 ./cutout1.mp4 -y -ss ti ...

  10. pyhthon Opencv截取视频中的图片

    import os import cv2 ##加载OpenCV模块 def video2frames(pathIn='', pathOut='', imgname='', only_output_vi ...

随机推荐

  1. C语言之兔子生产问题

    /#include <stdio.h> main() { long fib1 = 1, fib2 = 1, fib;//定义长整型变量,fib1表示当前前一个月的兔子数,fib2表示当前前 ...

  2. form 表单提交 保存的时候再提交文件,之前一直是选择文件就传了,这个也比较好

    form 表单提交 保存的时候再提交文件,之前一直是选择文件就传了,这个也比较好 代码 <Upload :action="action" :max-size="ma ...

  3. $help console 里面的入口帮助文档

    $help console 里面的入口帮助文档 Object.defineProperty(window, '$help', { get: function() { // 这里面this是window ...

  4. Set-Alias navi ./navi.bat - 设置别名 - powershell入门 (后期改方案了,换npm script)

    需求 开机要启动好几个服务,原先都用vscode启动,觉得可能比较占内存,所以改成命令行 发现直接运行bat,需要输入./batName.bat 一次还行,天天输入就麻烦了 命令 Set-Alias ...

  5. 分支合并规则 dev master v1.0.XX 三条分支的合并原则

    分支合并规则 dev master v1.0.XX 三条分支的合并原则

  6. SQL语句之索引操作

    目录 索引 创建索引 CREATE INDEX 语句 CREATE UNIQUE INDEX 语句 索引多个列 删除索引 参考资料 索引 可以在表中创建索引,以便更加快速高效地查询数据. 用户无法看到 ...

  7. HUAWEI WATCH GT3手表芯片传感器简析

    一 这里梳理一下华为手表GT3所使用的芯片 芯片A: BES2500L 恒玄BES2500L智能手表SoC,集存储.音频.连接为一体,集成BT5.2双模蓝牙,可支持BLE数据传输.蓝牙通话和音乐播放功 ...

  8. iOS模拟器 Unable to boot the Simulator —— Ficow笔记

    本文首发于 Ficow Shen's Blog,原文地址: iOS模拟器 Unable to boot the Simulator -- Ficow笔记. 内容概览 前言 终结模拟器进程 命令行改权限 ...

  9. RMI反序列化分析

    RMI介绍 RMI全程Remote Method Invocation (远程方法引用),RMI有客户端和服务端,还有一个注册中心,在java中客户端可以通过RMI调用服务端的方法,流程图如下: 服务 ...

  10. 聊聊微信小程序的隐私协议开发

    为什么需要隐私协议? 小程序隐私授权弹窗FAQ官方:https://developers.weixin.qq.com/community/develop/doc/00000ebac5c3e042384 ...