如何使用vuejs捕捉当前视频屏幕或缩略图
您好，我想捕获当前的视频屏幕并在下面显示结果。
即使我在这里也有参考的Java代码https://www.w3schools.com/code/tryit.asp?filename=GC0Z7WOPB15I，但我没有得到任何将其转换为工作代码形式的vue的帮助。
问题：我希望VUE的工作代码与VUE相同(https://www.w3schools.com/code/tryit.asp?filename=GC0Z7WOPB15I)，但不适用于单个缩略图
由于缺乏vuejs知识，我无法在所需位置显示捕获的图像
已尝试方法1：
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">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：
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">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>请帮我提前道谢！
解决方案
当您尝试Tried Method 1第一个方法时，将以错误结束
V-on处理程序中出错："；SecurityError：无法执行‘toDataURL’ On‘HTMLCanvesElement’：可能无法导出受污染的画布。
- 出于安全原因，您的本地驱动器被声明为 其他域(&Q；)，并将污染画布。
- 您似乎正在使用来自未正确设置的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>
<button @click="reset()">Reset</button>
<div>------------------Show captured thumbnail below -----------------</div>
<div id="output"></div>
</div>
第二步：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
相关文章