做了个 chrome 插件实现 B 站视频截图功能，直接从当前视频帧无损复制-Toy模板网

这篇具有很好参考价值的文章主要介绍了做了个 chrome 插件实现 B 站视频截图功能，直接从当前视频帧无损复制。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

起因是看 B 站视频想截个图很麻烦，右下角暂停按钮无法去除，于是写了一行代码把暂停按钮隐藏。

后经提醒，发现可以通过 canvas 获取视频帧来截取图片，于是写了如下代码完美获取视频帧。

  var v = document.querySelector(".bpx-player-video-wrap video");
  var myCanvas = new OffscreenCanvas(v.videoWidth,v.videoHeight);
  var ctx = myCanvas.getContext('2d');
  ctx.drawImage(v, 0, 0, v.videoWidth, v.videoHeight)
  myCanvas.convertToBlob().then(blob => {
    const fileName = 'screenshot.png';
    const d = document.createElement('a')
    d.href = window.URL.createObjectURL(blob)
    d.download = fileName
    d.style.display = 'none'
    document.body.appendChild(d)
    d.click()
    document.body.removeChild(d)
    window.URL.revokeObjectURL(d.href)
  })

用法：f12 打开 console 把这段代码粘贴回车执行即可下载视频帧。

完成后又稍作改进，把这段代码转成 chrome 插件，可以通过右键来下载视频帧，也可以用快捷键下载。 GitHub - Vant1032/BilibiliVideoCaptureImage: 截取B站当前视频帧保存为图片

各位可以去体验下这款插件，厚脸皮要个 star ，有什么问题也可以通过 issue 反馈。

以下是我使用这款插件对 B 站不同分辨率视频在 HEVC 编码下最终插件保存的图片大小测试：