我正在尝试从视频data-uri
var video = document.createElement('video');
video.src = uri;
canvas = document.createElement('canvas');
canvas.style.visibility = 'hidden';
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
var snapshot = canvas.toDataURL();
但这不起作用。为什么呢?
答案 0 :(得分:0)
虽然这是一个数据URI,您可能希望视频立即加载,但您需要收听视频的canPlay
事件(see MDN)。
function onFile(ev) {
var file = ev.target.files[0];
console.log();
var reader = new FileReader();
reader.addEventListener('load', function() {
taksVideoSnapshot(reader.result);
}, false);
reader.readAsDataURL(file);
}
function taksVideoSnapshot(videoUri) {
var video = document.createElement('video');
video.addEventListener('canplay', function() {
canvas = document.createElement('canvas');
canvas.style.visibility = 'hidden';
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
var snapshot = canvas.toDataURL();
console.log('Snapshot', snapshot.length);
showThumb(snapshot);
}, false);
video.src = videoUri;
document.body.appendChild(video);
}
function showThumb(snapshot) {
var thumb = document.createElement('img');
thumb.src = snapshot;
document.body.appendChild(thumb);
}
<input type="file" onchange="onFile(event)">
另见JSBin。