Vue+canvas实现视频截图功能

开发过程中遇到一个实际问题，上传的视频需要提供视频封面（视频封面必填）。封面可以自己制作并上传，但是这样需要脱离网站，用其他方式制作封面，使用体验并不友好，因此第一个想到的方案是：上传视频时，若人员未上传封面，自动截取视频第一帧作为封面，但是这样会出现一种情况：视频第一帧是黑色，导致封面为黑色。因此考虑视频上传后，在播放中由人员自行截取画面作为视频封面。

简单效果如图：

前端代码如下：

<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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 实现网页截图功能详解

    vue 实现网页截图功能详解

    最近项目有一个需求,需要上传图片,但是客户上传的图片大小不一,所以我们需要规定客户的图片比例,但又需要是客户所需的,所以就想到了截图 实现效果 我们的架构是vue,所以用的是一个vue的截图插件 安装插件:npm install vue-cropper --save-dev 引入组件 import Vue from 'vue'; import { VueCropper } from "vue-cropper"; Vue.use(VueCropper) 核心代码 <div>

  • 如何用vue实现网页截图你知道吗

    如何用vue实现网页截图你知道吗

    目录 1.安装html2Canvas 2.在需要的vue组件中引入 3.编写一个截图按钮 4.调用函数toImage 总结 1.安装html2Canvas npm install html2canvas --save 2.在需要的vue组件中引入 import html2canvas from "html2canvas"; 3.编写一个截图按钮 <el-button class="button-dalod" size="mini" titl

  • vue3如何将html元素变成canvas(海报生成),进行图片保存/截图

    目录 将html元素变成canvas(海报生成),进行图片保存/截图 使用html2canvas将页面转化为图片 将html元素变成canvas(海报生成),进行图片保存/截图 // 网页上只有一张图片 我们可以直接就进行图片保存 // 但是你想 保存这张图片的时候 顺便把下面的字也带上 相当于截图 那请你像我这样做 <div id="capture" style="padding: 10px; background: #fff"> <img :s

  • JS实现预加载视频音频/视频获取截图（返回canvas截图）

    #load-media.js /** * Create by Capricorncd 2017 */ // 同域资源实现视频截图,可上传的图片数据格式 // 非同域资源实现canvas截图预览 // 提示码 const CODES = { 0: 'success', 1: 'The url is not valid', 2: 'onerror' } /** * constructor * @param opts.url 音频|视频URL * @param opts.type 'audio|vid

  • Vue拖动截图功能的简单实现方法

    Vue拖动截图功能的简单实现方法

    拖动鼠标进行页面截图(也可指定区域拖动截图) 一.安装html2canvas.vue-cropper npm i html2canvas --save //用于将指定区域转为图片 npm i vue-cropper -S //将图片进行裁剪 二.在main.js注册vue-cropper组件 import VueCropper from 'vue-cropper' Vue.use(VueCropper) 三.页面中引入html2canvas import html2canvas from "ht

  • vue 实现无规则截图

    vue 实现无规则截图

    大家所见到的大多数都是有规则截图,可以应付大部分的应用场景,但是对于图片处理,想要将规则交给用户,普通的截图已经满足不了用户了,那我们能不能前端实现图片的任意规则截取,接下来让我一起探讨一下吧! 通过 svg 实现 图片截取 使用svg中clipPath image标签 通过id 映射, 动态位置polygon的坐标,实现图片的截取 <div> <div class="content" @mousemove="mousemove" @mouseup

  • JavaScript+html5 canvas实现本地截图教程

    JavaScript+html5 canvas实现本地截图教程

    最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传<JavaScript File API文件上传预览>,更加觉得html5好玩了,想着也试试写写这功能权当学习canvas吧. 下面奉上我自己写的一个demo,代码写得比较少,很多细节不会处理.如果有不得当的地方恳请指教,谢谢啦 ^_^ ^_^ 功能实现步奏: 一.获取文件,读取文件并生成url 二.

  • 原生js基于canvas实现一个简单的前端截图工具代码实例

    原生js基于canvas实现一个简单的前端截图工具代码实例

    这篇文章主要介绍了原生js基于canvas实现一个简单的前端截图工具代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 先看效果 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{

  • vue项目中canvas实现截图功能

    vue项目中canvas实现截图功能

    本文实例为大家分享了vue项目中canvas实现截图功能的具体代码,供大家参考,具体内容如下 实现效果: 整理一下最近在vue项目中做的一个截图功能(只能够截取图片),即用鼠标在画布上进行框选截取. 思路大概如下:做一个弹窗,打开弹窗的时候传入要截的图,接下来在这个窗口里面,点击截图按钮,开始截图,点击取消按钮,取消截图. 窗口里面的html主要是三个部分,一个是可截图区域,一个是截取图片的回显,一个是操作按钮(截图按钮和取消截图按钮). 部分html: <!--截图区域--> <div

  • 微信小程序canvas拖拽、截图组件功能

    微信小程序canvas拖拽、截图组件功能

    先看下微信小程序canvas拖拽功能 组件地址 github.com/jasondu/wx-- readme近期补上 实现效果 如何实现 使用canvas 使用movable-view标签 由于movable-view无法实现旋转,所以选择使用canvas 需要解决的问题 如何将多个元素渲染到canvas上 如何知道手指在元素上.如果多个元素重叠如何知道哪个元素在最上层 如何实现拖拽元素 如何缩放.旋转.删除元素 看起来挺简单的嘛,就把上面这几个问题解决了,就可以实现功能了:接下来我们一一解决.

  • electron+vue实现div contenteditable截图功能

    最近在学习基于electron + electron-vue开发聊天客户端项目时,需要用到编辑器插入表情功能.一般通过input或textarea也能实现,通过插入[笑脸].(:12 这些标签,展示的时候解析标签就行. 如下图效果: 在网上找到的jq插件实现在textarea光标处插入表情符标签 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

随机推荐