做了个 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 编码下最终插件保存的图片大小测试:

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

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

相关推荐
贩卖纯净水.13 分钟前
Chrome调试工具(查看CSS属性)
前端·chrome
熊的猫11 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
科技探秘人13 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人13 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
守城小轩20 小时前
Chromium127编译指南 Mac篇(五)- 编译Chromium
chrome·chrome devtools·指纹浏览器·浏览器开发
浏览器爱好者1 天前
Chrome与火狐哪个浏览器的移动版本更流畅
前端·chrome
gqkmiss2 天前
Chrome 130 版本新特性& Chrome 130 版本发行说明
前端·chrome·chromeos·chrome 130
龙哥说跨境2 天前
浏览器内核版本更新:Chrome 130✔
前端·javascript·chrome
浏览器爱好者2 天前
Chrome与夸克的安全性对比
前端·chrome
浏览器爱好者2 天前
Chrome与夸克谁更节省系统资源
前端·chrome