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

星河arnold

于 2023-10-10 12:23:30 发布

阅读量1.1k

点赞数 1

文章标签： chrome

本文链接：https://blog.csdn.net/qq_21845263/article/details/133744216

版权

文章介绍了作者为解决在B站观看视频时截图不便的问题，开发了一个基于canvas的JavaScript代码，可抓取视频帧并转换为图片。后续将此代码转化为Chrome插件，用户可以直接下载高清视频帧。测试显示，该插件能按视频原始分辨率保存图片，特别适合画质爱好者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

起因是看 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 插件，可以通过右键来下载视频帧，也可以用快捷键下载。