使用HTML和JavaScript实现视频截图功能

实现效果

首先，让我们来看看最终的效果。点击图片即可查看在线演示：

实现思路

1. 获取远程MP4、本地摄像头和本地上传的MP4文件的视频流，并准备相应的节点。

例如，以下代码展示了如何创建一个基本的元素：

2. 将视频帧绘制到画布上，代码如下：

ctx.drawImage(video, 0, 0, video.offsetWidth, video.offsetHeight);

具体用法请参考：W3Schools - Canvas drawImage 方法

3. 将的内容转换为dataURL，以便在页面上显示截图。

4. 将dataURL转换为Blob对象，并构建FormData对象，通过Ajax（或fetch和axios）将图片文件上传到服务器。

或者，在第3步中，直接将内容转换为Blob对象，使用URL.createObjectURL(blob)来显示图片，从而省去dataURL到Blob对象的转换步骤。

参考文章

1. 理解DOMString、Document、FormData、Blob、File和ArrayBuffer


2. W3Schools - HTML 音频/视频 DOM 参考手册


3. MDN Web Docs - toDataURL 方法


4. MDN Web Docs - toBlob 方法


5. MDN Web Docs - 使用来自Web应用程序的文件


6. MDN Web Docs - getUserMedia 方法

附录：DataURL、Blob、File、Image之间的关系与JS转换

1. canvas转dataURL

function canvasToDataURL(canvas, format, quality) { return canvas.toDataURL(format || 'image/jpeg', quality || 1.0); }

2. dataURL转image

function dataURLToImage(dataurl) { var img = new Image(); img.src = dataurl; return img; }

3. canvas转Blob并生成image

canvas.toBlob(function(blob) { var url = URL.createObjectURL(blob); image.src = url; image.Onload= function() { URL.revokeObjectURL(url); }; });

4. dataURL转Blob对象

function dataURLToBlob(dataurl) { var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]; var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); }