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

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

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

1，定義創(chuàng)建一個(gè) canvas 標(biāo)簽;
2，指定 canvas 標(biāo)簽的寬高;
3, 調(diào)用canvas元素中的 getContext() 方法(返回一個(gè)用于在畫布上繪圖的環(huán)境)。

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()的第一個(gè)參數(shù)不再是player而應(yīng)該是**player.childNodes[0]**否則會(huì)出現(xiàn)如下報(bào)錯(cuò)：

第三步：將繪制好的圖片轉(zhuǎn)成base64格式

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

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

完整示例代碼

function screenShot() {var player = document.getElementById("player01"); //獲取video的Dom節(jié)點(diǎn)player.setAttribute("crossOrigin", "anonymous"); //添加srossOrigin屬性，解決跨域問(wèn)題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"); //將圖片轉(zhuǎn)成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); //顯示在頁(yè)面中viewer.destroy(); //需要先銷毀再渲染viewer = new Viewer(document.getElementById(`screenshot-list`)) }

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。