思路
使用Canvas API中的CanvasRenderingContext2D實例方法drawImage()來截取video的圖片
文檔指路：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage
使用語法
void ctx.drawImage(image, dx, dy); void ctx.drawImage(image, dx, dy, dWidth, dHeight); void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
參數
image
繪制到上下文的元素。允許任何的 canvas 圖像源(CanvasImageSource)，例如：CSSImageValue (en-US)，HTMLImageElement，SVGImageElement (en-US)，HTMLVideoElement，HTMLCanvasElement，ImageBitmap 或者OffscreenCanvas。
sx可選
需要繪制到目標上下文中的，image的矩形（裁剪）選擇框的左上角 X 軸坐標。
sy可選
需要繪制到目標上下文中的，image的矩形（裁剪）選擇框的左上角 Y 軸坐標。
sWidth可選
需要繪制到目標上下文中的，image的矩形（裁剪）選擇框的寬度。如果不說明，整個矩形（裁剪）從坐標的sx和sy開始，到image的右下角結束。
sHeight可選
需要繪制到目標上下文中的，image的矩形（裁剪）選擇框的高度。
dx
image的左上角在目標canvas上 X 軸坐標。
dy
image的左上角在目標canvas上 Y 軸坐標。
dWidth可選
image在目標canvas上繪制的寬度。 允許對繪制的image進行縮放。 如果不說明， 在繪制時image寬度不會縮放。
dHeight可選
image在目標canvas上繪制的高度。 允許對繪制的image進行縮放。 如果不說明， 在繪制時image高度不會縮放。
實現代碼
var video = document.getElementById("videoBox");
var canvas = document.createElement("canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
console.log(canvas.toDataURL());
var img = document.createElement("img");
img.src = canvas.toDataURL();
// 找個地方放圖片
document.getElementById("imgOut").append(img)
完整代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <video id="videoBox" autoplay controls="controls"> <source src="D:/videos/無聊的自拍.mp4" /> </video> <button onclick="cut()">截圖</button> <div id="imgOut"></div> <script> function cut() { "use strict"; var scale = 0.25; var video = document.getElementById("videoBox"); var canvas = document.createElement("canvas"); canvas.width = video.videoWidth * scale; canvas.height = video.videoHeight * scale; canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); canvas.setAttribute("id", "canvas"); document.getElementById("imgOut").append(canvas) } </script> </body> </html>
效果
順帶說一下，canvas用toDataURL()這個方法會報錯，文檔指路： https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image，還在尋找合適的處理方法。。。