从data-uri视频中拍摄快照

Question

我正在尝试从视频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();

但这不管用。为什么？

Answer 1

尽管它是一个数据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。