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

[keepRun]

起因是看 B 站视频想截个图很麻烦，右下角暂停按钮无法去除，于是写了一行代码把暂停按钮隐藏，帖子在这分享一行代码隐藏 B 站暂停时的按钮，解决截屏时按钮遮挡问题

不得不说 v 站藏龙卧虎，经提醒，发现可以通过 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 插件，可以通过右键来下载视频帧，也可以用快捷键下载。 https://github.com/Vant1032/BilibiliVideoCaptureImage

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

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

分辨率	png
4k	7MB
1080p 高码率	2.8MB
1080p	2.1MB
720p	700KB

对于用 1080p 、2k 显示器的人，看 4k 视频截屏无法截出 4k 的分辨率，受到了显示器分辨率限制，而使用我的插件就可以完美截取视频原始的分辨率的图片，画质党福音。

另一方面开发过程中我就在想，既然可以这样，那将所有视频网站内容的视频保存下来也是类似的原理，我看到浏览器本身提供了视频编码的 api ，这样的话可以把那些视频帧再重新合成视频，视频下载器应该就是类似的道理，不过这样就涉及到版权问题了。

[Shatyuka]

可以看看这个 https://github.com/the1812/Bilibili-Evolved

[yulon]

啊这，video 标签刚出来就有好多了，但是 Canvas 会有跨域问题，有些视频截不到

[keepRun]

@yulon 啥问题，不太理解

[fdghjk]

泰酷辣 考虑多增加一些个网站吗

[keepRun]

@fdghjk 哪些网站？要添加应该比较简单，通过选择器找到对应的 video 标签

[okakuyang]

新的 chrome 自带了这个功能 从视频上右键有复制图片

[jiyan5]

右键，右键，复制视频帧

[keepRun]

@jiyan5 chrome 自带的复制功能以后不一定有效，可能 B 站后续不让这样，另一方面产品使用体验略有不同