第一步：創建video用于存放需要截取的視頻文件

<video id="player01" preload="auto" width="640" height="360" playsinline webkit-playsinline></video>

第二步：創建canvas畫布，用于繪制截取到的圖片

1，定義創建一個 canvas 標簽;
2，指定 canvas 標簽的寬高;
3, 調用canvas元素中的 getContext() 方法(返回一個用于在畫布上繪圖的環境)。

var canvas = document.createElement("canvas");canvas.width = player.clientWidth;canvas.height = player.clientHeight;// canvas = canvas.getContext("2d")canvas.getContext("2d").drawImage(player.childNodes[0] , 0, 0, canvas.width, canvas.height);//截

要注意的是drawImage()的第一個參數不再是player而應該是**player.childNodes[0]**否則會出現如下報錯：

第三步：將繪制好的圖片轉成base64格式

var dataURL = canvas.toDataURL("image/png");

將得到的base64格式的圖片地址添加到網頁中，這樣就完成視頻截圖功能了！

完整示例代碼

function screenShot() {var player = document.getElementById("player01"); //獲取video的Dom節點player.setAttribute("crossOrigin", "anonymous"); //添加srossOrigin屬性，解決跨域問題var canvas = document.createElement("canvas");canvas.width = player.clientWidth;canvas.height = player.clientHeight;// canvas = canvas.getContext("2d")canvas.getContext("2d").drawImage(player.childNodes[0] , 0, 0, canvas.width, canvas.height);//截var dataURL = canvas.toDataURL("image/png"); //將圖片轉成base64格式let str = ` <li class="screenshot-item"><div class="shot-time">2022-10-17</div><img src="${dataURL}" alt="" class="shot-img"> </li>`$("#screenshot-list").append(str); //顯示在頁面中viewer.destroy(); //需要先銷毀再渲染viewer = new Viewer(document.getElementById(`screenshot-list`)) }

總結

以上是生活随笔為你收集整理的JS 截取视频某一帧图片 实现视频截图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。