做了个 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 的分辨率,受到了显示器分辨率限制,而使用我的插件就可以完美截取视频原始的分辨率的图片,画质党福音。

相关推荐
haima953 小时前
ubuntu安装chrome无法打开问题
前端·chrome
凄凄迷人4 小时前
如何调试 chrome 崩溃日志(MAC)
前端·chrome·macos·crash
浏览器爱好者15 小时前
如何定制谷歌浏览器的外观主题
chrome
无敌糖果18 小时前
Python+Selenium无头浏览器实现网页截图
chrome·爬虫·selenium·测试工具
Narutolxy1 天前
一篇专业且实用的技术博客:从离线安装 Nginx 到动态适配依赖升级20241125
运维·chrome·nginx
星月昭铭1 天前
浏览器控制台中使用ajax下载文件(没有postman等情况下)
前端·chrome·ajax·postman
孤帝@2 天前
Shell编程完结
前端·chrome
荼靡6032 天前
shell完结
前端·chrome
一颗青果2 天前
【Linux】详解shell代码实现(上)
linux·运维·服务器·前端·chrome·算法·1024程序员节
航月2 天前
linux基本命令2
linux·运维·chrome