如何使用 vuejs 捕获当前视频屏幕或缩略图

Question

嗨，我想捕捉当前的视频屏幕并在下面显示结果。

即使我在这里 https://www.w3schools.com/code/tryit.asp?filename=GC0Z7WOPB15I 有参考 javascript 代码，但我没有得到任何帮助以将其转换为工作代码形式的 vue。

问题：我想要相同的 (https://www.w3schools.com/code/tryit.asp?filename=GC0Z7WOPB15I) vue 工作代码，但对于单个缩略图

由于缺乏vuejs 知识，我无法在所需位置显示捕获的图像

试过方法一：

const app = new Vue({
     el:'#app',
     data(){
       return {
          hello:'world'
       }
   },
   methods:{
      capture(){
             alert('captured called');
             let videoCanvas = document.createElement('canvas');
             
         let video = document.getElementById('video')

        videoCanvas.height = video.height;
        videoCanvas.width = video.width;
        videoCanvas.getContext('2d').drawImage(video, 0, 0);
        var snapshot = videoCanvas.toDataURL('image/png');

        var img = new Image();
        
        img.onload = function () {
          document.body.appendChild(this);
        };
        
        img.src = snapshot;
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">

   <video id="video" controls="controls">
      <source        src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
   </video>
   
   <button @click="capture()">Play and Capture</button>
   
   
   <div>------------------Show captured thumbnail below -----------------</div>

    <img src=""/>
   
</div>

即使我尝试将此代码 https://www.w3schools.com/code/tryit.asp?filename=GC0Z7WOPB15I 转换为 https://codepen.io/eabangalore/pen/Pojrzax 也不起作用

如果任何方法（或 2 中的解决方案）对我来说都行得通

试过方法二：

const app = new Vue({
     el:'#app',
      data() {
    return {
     canvas:''
    };
  },
  methods: {
    capture(video, scaleFactor) {
        if(scaleFactor == null){
            scaleFactor = 1;
        }
        var cx =0;
        var cy=0;
        
        var w = video.videoWidth * scaleFactor;
        var h = video.videoHeight * scaleFactor;
        var canvas = document.createElement('canvas');
            canvas.width  = w * 2;
            canvas.height = h * 0.5;
            
        var ctx = canvas.getContext('2d');
            ctx.drawImage(video, cx, cy, 50, 50);
            ctx.font = '14pt, sans-serif';
            
        return canvas;
    } ,

      displayThumbnail(){
            let video = document.querySelector(`#video`);
            console.log('video',video);
            let scaleFactor = 0.25;
            this.canvas = this.capture(video, scaleFactor);
            console.log('this.canvas',this.canvas);
       }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>



  <div id="app">

   <video id="video" controls="controls">
      <source        src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
   </video>
    
    <button @click="displayThumbnail()"> Capture</button>
    
   <div>----------------------- show captured thumbnail below -----------------------------------</div>
    
<div id="output" style="display: inline-block; top: 4px; position: relative ;border: dotted 1px #ccc; padding: 2px;width:100%" v-html="canvas"></div>
  
  </div>

请帮我提前谢谢！！！

Answer 1

您需要在数据部分（hello: 下方）中添加一个新变量，我们将其命名为 imgSrc: null。

var snapshot = videoCanvas.toDataURL('image/png'); 应替换为 this.imgSrc = videoCanvas.toDataURL('image/png'); 以下所有内容，包括 img.src = snapshot; 都可以删除。

现在您可以对 HTML 元素使用数据绑定。

<img :src="imgSrc" v-if="imgSrc" />

const app = new Vue({
     el:'#app',
     data(){
       return {
          hello:'world',
          imgSrc: null,
       }
   },
   methods:{
      capture(){
             alert('captured called');
             let videoCanvas = document.createElement('canvas');
             
         let video = document.getElementById('video')

        videoCanvas.height = video.height;
        videoCanvas.width = video.width;
        videoCanvas.getContext('2d').drawImage(video, 0, 0);
        this.imgSrc = videoCanvas.toDataURL('image/png');
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">

   <video id="video" controls="controls">
      <source        src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
   </video>
   
   <button @click="capture()">Play and Capture</button>
   
   
   <div>------------------Show captured thumbnail below -----------------</div>

    <img :src="imgSrc" v-if="imgSrc" />
   
</div>

Answer 2

当您尝试Tried Method 1 第一种方法时，您最终会遇到错误

v-on 处理程序中的错误：“SecurityError: 无法执行 'toDataURL' 关于“HTMLCanvasElement”：可能无法导出受污染的画布。

• 出于安全原因，您的本地驱动器被声明为 “其他域”并且会污染画布。
• 似乎您使用的图片来自未正确设置的 URL Access-Control-Allow-Origin 标头，因此问题..您可以 从您的服务器获取该图像并将其从您的服务器获取到 避免 CORS 问题

我使用Tried Method 2 方法创建了一个示例，用于从视频生成缩略图。

第一步：创建HTML模板

<template>
  <div id="app">
    <video id="video" controls="controls">
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" /></video
    ><br />
    <button @click="capture()">Play and Capture</button>
    <div>------------------Show captured thumbnail below -----------------</div>
    <canvas id="canvas"></canvas>
  </div>
</template>

第二步：创建capture方法

capture() {
   let videoCanvas = document.getElementById("canvas");
   let video = document.getElementById("video");
   videoCanvas.getContext("2d").drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
},

DEMO

更新了生成多个缩略图的答案，

第一步：创建html模板

<div id="app">
  <video id="video" controls="controls">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" />
  </video><br />
  <button @click="capture()">Play and Capture</button>&nbsp;
  <button @click="reset()">Reset</button>
  <div>------------------Show captured thumbnail below -----------------</div>
  <div id="output"></div>
</div>

第 2 步： methods 用于生成多个缩略图

 capture() {
  var video = document.getElementById("video");
  var output = document.getElementById("output");
  var canvas = this.createThumbnail(video, this.scaleFactor);
  canvas.onclick = function () {
    window.open(this.toDataURL());
  };
  this.listThumbnails.unshift(canvas);
  output.innerHTML = "";
  this.listThumbnails.forEach((item, index) => {
    if (item) {
      output.appendChild(item);
    }
  });
},
createThumbnail(video, scaleFactor) {
  if (scaleFactor == null) {
    scaleFactor = 1;
  }
  var w = video.videoWidth * scaleFactor;
  var h = video.videoHeight * scaleFactor;
  var canvas = document.createElement("canvas");
  canvas.style.margin = "5px";
  canvas.width = w;
  canvas.height = h;

  var ctx = canvas.getContext("2d");
  ctx.drawImage(video, 0, 0, w, h);
  return canvas;
},
reset() {
  var output = document.getElementById("output");
  output.innerHTML = "";
  this.listThumbnails = [];
}

Multiple Thumbnail Demo