vue截取视频第一帧的图片问题

已拿到视频的url，现在要截取视频的第一帧，作为封面图片。

在网上找了几种，都是空白。稍微改了一下，终于成功了。

基本就是用cavas进行绘制，解决一下跨域问题，截视频第一帧，然后根据视频原本的宽高进行绘制，最后转一下图片格式即可。

代码如下：

<template>
　　......
    <video :src="videoSrc" id="upvideo">您的浏览器不支持 video 标签。</video>
　　......
    <span style="margin-left:10px; font-size:16px;">封面设置</span>
    <canvas id="mycanvas" style="display: none"></canvas>
    <img :src="imgSrc">
　　......
</template>

<script>
export default {
    data(){
        return{
            videoSrc:'xxxxxxxx', //视频的url
            imgSrc:'',
            ......
        }
    },
    methods:{
      ......
      changeImage(url){
        this.findvideocover(); //调用方法，按自己需求放在什么位置调用
        ......
      },

      //截取视频第一帧作为播放前默认图片
      findvideocover(){
        let video = document.getElementById("upvideo")
        let canvas = document.getElementById("mycanvas")
        video.crossOrigin = "anonymous"
        video.currentTime = 1
        canvas.width = video.clientWidth
        canvas.height = video.clientHeight
        canvas.getContext('2d').drawImage(video,0,0,canvas.width, canvas.height)
        this.imgSrc = canvas.toDataURL('image/png')
      },
      ......
    }
}
</script>
<template>
　　......
    <video :src="videoSrc" id="upvideo">您的浏览器不支持 video 标签。</video>
　　......
    <span style="margin-left:10px; font-size:16px;">封面设置</span>
    <canvas id="mycanvas" style="display: none"></canvas>
    <img :src="imgSrc">
　　......
</template>

<script>
export default {
    data(){
        return{
            videoSrc:'xxxxxxxx', //视频的url
            imgSrc:'',
            ......
        }
    },
    methods:{
      ......
      changeImage(url){
        this.findvideocover(); //调用方法，按自己需求放在什么位置调用
        ......
      },

      //截取视频第一帧作为播放前默认图片
      findvideocover(){
        let video = document.getElementById("upvideo")
        let canvas = document.getElementById("mycanvas")
        video.crossOrigin = "anonymous"
        video.currentTime = 1
        canvas.width = video.clientWidth
        canvas.height = video.clientHeight
        canvas.getContext('2d').drawImage(video,0,0,canvas.width, canvas.height)
        this.imgSrc = canvas.toDataURL('image/png')
      },
      ......
    }
}
</script>

到此这篇关于vue截取视频第一帧的图片问题的文章就介绍到这了,更多相关vue截取视频图片内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)

    vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)

    效果 若使用 请自行优化代码和样式 不显示图片/播放视频音频代码如下 <template> <div> <div v-on:dragover="tts" v-on:drop="ttrs" style="width: 800px;height: 200px;border: 1px solid black;font-size: 40px;line-height: 200px"> {{dt}} </div>

  • vue-cropper插件实现图片截取上传组件封装

    vue-cropper插件实现图片截取上传组件封装

    基于vue-cropper插件实现图片截取上传组件封装的具体代码,供大家参考,具体内容如下 需求场景: 后台开发需要上传图片并进行相应比例尺寸图片的截取,本组件开发采用Ant Design Vue组件库搭配vue-cropper插件进行封装 实现如下 html <template> <div> <a-upload name="avatar" list-type="picture-card" class="avatar-uplo

  • 使用vue和element-ui上传图片及视频文件方式

    目录 效果图 上传后 图片上传 视频上传 项目使用vue+element-ui,实现了表单多图上传图片,上传视频,以及表单图片回显,视频回显,表格渲染图片等功能 效果图 上传后 图片可回显,视频可播放,,这时候全部缓存在页面,并没有提交到后端服务器,只要到用户提交的那一步才确定上传,减低不必要的服务器开支 图片上传 前端缓存base64方便回显,以及后台上传,视频上传则使用file类型去上传(base64对视频编码会导致请求参数过长) <!-- 描述:图片上传, 基于 element-ui 组件

  • vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）

    说在前面 网上有很多种文件上传的方法,根据公司最近的业务需求,要求实现多种文件的上传,在实现过程中,查阅了很多资料,最后,终于把功能实现了,开心! <template> <div> <v-header :left-text="`上传${columnName}`"></v-header> <div class="upload"> <div v-if="columnName === '视频'&q

  • Vue图片与文字混输的实现方法

    Vue图片与文字混输的实现方法

    前言 用多了JQuery,习惯了使用JQuery的API操作DOM,几乎忘记了原生JS对DOM操作,今天在项目中遇到了文字和图片混输的情况,第一个想到的办法是用textarea实现,结果发现实现不了图片输入,然后想着找个富文本编辑器的插件实现,深思熟虑之后,我的需求好像也没那么复杂,不至于引用个插件,看了掘金的发布沸点功能,然后就模仿了其作法,于是就有了这篇文章的分享.先给大家展示下最后实现的效果

  • vue截取视频第一帧的图片问题

    已拿到视频的url,现在要截取视频的第一帧,作为封面图片. 在网上找了几种,都是空白.稍微改了一下,终于成功了. 基本就是用cavas进行绘制,解决一下跨域问题,截视频第一帧,然后根据视频原本的宽高进行绘制,最后转一下图片格式即可. 代码如下: <template> ...... <video :src="videoSrc" id="upvideo">您的浏览器不支持 video 标签.</video> ...... <sp

  • php截取视频指定帧为图片

    截取视频指定帧为图片,php ffmpeg扩展已经完美实现: $movie = new ffmpeg_movie($video_filePath); $ff_frame = $movie->getFrame(1); $gd_image = $ff_frame->toGDImage(); $img="./test.jpg"; imagejpeg($gd_image, $img); imagedestroy($gd_image); 然而问题来了,智能手机拍摄的视频,由于拍摄方向

  • android 获取视频第一帧作为缩略图的方法

    今天,简单讲讲android里如何获取一个视频文件的第一帧作为缩略图显示在界面上. 之前,我说个最近需要从服务器下载视频文件,但是下载后肯定需要显示视频的缩略图在界面上给用户看,于是想到显示视频的第一帧作为缩略图.但是我不知道具体怎么写,于是在网上查找资料,最终是解决了问题.这里记录一下. 一.使用MediaMetadataRetriever获取视频的第一帧作为缩略图 /** * 获取视频文件截图 * * @param path 视频文件的路径 * @return Bitmap 返回获取的Bit

  • php如何利用ffmpeg获取视频第一帧为缩略图

    目录 phpffmpeg获取视频缩略图 1.环境 2.centos7安装ffmpeg 3.项目安装ffmpeg包 4.php代码 附Fmpeg读取视频信息 总结 php ffmpeg获取视频缩略图 1.环境 centos 7 ffmpeg version 2.8.15 Copyright 2.centos7安装ffmpeg centos7安装ffmpeg sudo rpm --import http://li.nux.ro/download/nux/RPM-GPG-KEY-nux.ro sudo

  • Android截取视频帧并转化为Bitmap示例

    MainActivity如下: 复制代码 代码如下: package cn.testmediametadataretriever; import java.io.File; import java.io.FileOutputStream; import android.media.MediaMetadataRetriever; import android.os.Bundle; import android.os.Environment; import android.app.Activity;

  • Java 截取视频资料中的某一帧作为缩略图

    目录 基础知识 FFmpegFrameGrabber BufferedImage,ImageIO MultipartFile 具体实现 引入依赖 最近项目中有一个需求,就是要实现视频资料的收藏功能,当时想了想,收藏记录实现并不是很难,但是想展现出视频的缩略图,就要想想其他办法了,所以就想到了截取视频资料中的某一帧作为缩略图,我没有选择截取第一帧,选择的是第五帧,因为第一帧可能没有内容. 基础知识 JavaCV:功能很强大,封装了很多很视频.图片相关的内容. JavaCV 是一款基于JavaCPP

  • python使用opencv按一定间隔截取视频帧

    关于opencv OpenCV 是 Intel 开源计算机视觉库 (Computer Version) .它由一系列 C 函数和少量 C++ 类构成,实现了图像处理和计算机视觉方面的很多通用算法. OpenCV 拥有包括 300 多个 C 函数的跨平台的中.高层 API .它不依赖于其它的外部库 -- 尽管也可以使用某些外部库. OpenCV 对非商业应用和商业应用都是免费 的.同时 OpenCV 提供了对硬件的访问,可以直接访问摄像头,并且 opencv 还提供了一个简单的 GUI(graph

  • 使用Python实现跳帧截取视频帧

    本文实例为大家分享了Python跳帧截取视频帧的具体代码,供大家参考,具体内容如下 可以自由设定时长来截取视频,经实测效果理想.期间遇到的一个麻烦是我的视频文件在D:盘,在原视频D盘目录上不能保存截取的图片文件,后改为在C:盘上保存,正常.具体原因不明,有网友知道原因所在,请告知. import cv2 import os def save_img(): video_path =r'读入视频路径' videos = os.listdir(video_path) for video_name in

  • python 视频逐帧保存为图片的完整实例

    我就废话不多说了,直接上代码吧! import cv2 import os def save_img(): video_path = r'F:\test\video1/' videos = os.listdir(video_path) for video_name in videos: file_name = video_name.split('.')[0] folder_name = video_path + file_name os.makedirs(folder_name,exist_ok

  • Android如何获取视频首帧图片

    Android获取视频首帧图片或第n秒的图片,供大家参考,具体内容如下 这里介绍如何获取视频首帧或者第n秒的图片并保存在本地,直接上代码: import android.graphics.Bitmap; import android.media.MediaMetadataRetriever; import android.os.Bundle; import android.os.Environment; import android.support.v7.app.AppCompatActivit

随机推荐