做了个 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 = fileNamed.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 的分辨率,受到了显示器分辨率限制,而使用我的插件就可以完美截取视频原始的分辨率的图片,画质党福音。
相关文章:
做了个 chrome 插件实现 B 站视频截图功能,直接从当前视频帧无损复制
起因是看 B 站视频想截个图很麻烦,右下角暂停按钮无法去除,于是写了一行代码把暂停按钮隐藏。 后经提醒,发现可以通过 canvas 获取视频帧来截取图片,于是写了如下代码完美获取视频帧。 var v document.querySelector(".bpx…...
Docker linux 安装
sudo yum update sudo yum clean all sudo yum makecache#安装依赖 sudo yum install -y yum-utils device-mapper-persistent-data lvm2 #添加官方存储库 sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo#安装-跳过一些异常依赖…...
windows部署django服务器
windows部署django服务器 1、安装IIS1.1 控制面板-----程序----程序和功能----启用或关闭windows功能1.2安装IIS服务器,完成后,重新进入,把CGI安装进系统 2、安装python与虚拟环境2.1 安装python2.2 安装virtualenv虚拟环境2.3 创建一个虚拟环…...
ChatGPT prompt汇总-个人使用-持续更新....
用途 学术写作更新记录 学术写作 中译英(GPT-4) I am a researcher studying deep learning and now trying to revise my manuscript which will be submitted to the Journal of Nature . I want you to act as a scientific English-Chinese translator, I will provide yo…...
Vue实现简单的接口封装
1. 在src中创建一个api文件夹 2. 按功能、模块等新建对应的js文件 3. 在内部写对应的封装接口,并导出 import axios from "axios";/*** 接口名称:* 接收参数:* 返回参数:* */export const miens ()>{return new P…...
软件测试工具有什么作用?有哪些好用的测试工具推荐?
软件测试工具是现代软件测试中不可或缺的重要组成部分,指的是一系列在软件开发过程中使用的工具,用于帮助测试人员进行测试活动,提高测试效率,减少测试成本。选择并使用合适的软件测试工具,可提高软件质量和效率。 一…...
写爬虫?前端er何必用python
前言 说起网络爬虫,很多人第一时间想到python,但爬虫并非只能用python实现,虽然网上大部分爬虫文章都在说python爬虫,但对于前端程序员来说,我觉得js才是最屌的(对于简单爬取任务来说,复杂的我暂时没碰到~),下面说说我的经验(是的,仅限本人经验),希望能给各位前…...
交通物流模型 | 基于交通图卷积长短时记忆网络的网络级交通流预测
交通物流模型 | 基于交通图卷积长短时记忆网络的网络级交通流预测 由于道路网络时变的交通模式和复杂的空间依赖性,交通流预测是一个具有挑战性的时空预测问题。为了克服该挑战,作者将交通网络看为一张图,并提出一个新的深度学习预测模型,交通图卷积长短时记忆网络(TGC-L…...
web 基础和http 协议
一、域名 域名的概念 IP地址不易记忆,域名方便记住,以便于用户进行搜索访问 早期使用Hosts文件解析域名地址 缺点: ① 主机名称重复 ② 主机维护困难 DNS(Domain Name System)域名系统 ① 分布式 将一个大的数…...
Java常量与变量
Java常量与变量 在程序执行过程中,其值不能被改变的量称为常量,其值能被改变的量称为变量。 Java关键字 Java关键字 int public (公有的,可跨包) new finally throw (抛出一个异常对象) continuefloatlongshort extends (继承,用于类继承类) returnbrea…...
神经网络中卷积和池化的区别
1、什么叫卷积? 卷积层是用一个固定大小的矩形区去席卷原始数据,将原始数据分成一个个和卷积核大小相同的小块,然后将这些小块和卷积核相乘输出一个卷积值(注意这里是一个单独的值,不再是矩阵了)。 卷积的…...
RK3568平台开发系列讲解(驱动篇)RK3568 PWM详解
🚀返回专栏总目录 文章目录 一、什么是PWM二、RK3568 PWM2.1、PWM 通道与引脚2.2、PWM 简介2.3、PWM 设备节点沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 PWM 是很常用到功能,我们可以通过 PWM 来控制电机速度,也可以使用 PWM 来控制 LCD 的背光亮度。 一、什…...
禾匠商城系统 企业转账到零钱 修改成 商家转账到零钱
注意php 7以上的json_encode 溢出 修改的路径: vendor/luweiss/wechat/src/Wechat/WechatPay.php <?phpnamespace luweiss\Wechat;class WechatPay extends WechatBase {const SIGN_TYPE_MD5 MD5;const TRADE_TYPE_JSAPI JSAPI;const TRADE_TYPE_NATIVE NA…...
点云从入门到精通技术详解100篇-基于激光点云的道路目标检测
目录 前言 国内外研究现状 点云目标检测算法的研究现状 激光雷达相关技术 2.1 引言...
【Hello Algorithm】暴力递归到动态规划(一)
暴力递归到动态规划(一) 斐波那契数列的动态规划机器人走路初级递归初级动态规划动态规划 先后选牌问题初级递归初级动态规划动态规划 我们可以一句话总结下动态规划 动态规划本质是一种以空间换时间的行为 如果你发现有重复调用的过程 在经过一次之后把…...
凉鞋的 Godot 笔记 107. 脚本窗口文件系统窗口
107. 脚本窗口&文件系统窗口 在上一篇,我们完成了第二轮循环,同时也接触了一些新内容,如下所示: 频率使用比较高的窗口,还剩下最后两个了,一个是脚本窗口: 另一个是文件系统窗口: 脚本窗口 和 文件系统…...
数据源作用以及spring配置数据源
数据源 数据源,简单理解为数据源头,提供了应用程序所需要数据的位置。数据源保证了应用程序与目标数据之间交互的规范和协议,它可以是数据库,文件系统等等。其中数据源定义了位置信息,用户验证信息和交互时所需的一些…...
Javaweb中的servlet中的消息体是什么?
2023年10月9日,周一晚上 目录 什么是消息体 什么是HTTP响应 HTTP响应由谁产生,发给谁 响应头具体有什么内容 Content-Type的值怎么写 HTTP响应例子 什么是消息体 消息体(message body)指HTTP响应中的实体主体内容。 什么是HTTP响应 在HTTP响应中…...
饥荒服务器阿里云租用价格表一年和一个月收费报价表
饥荒阿里云服务器多少钱一个月?阿里云服务器价格9元一个月,阿里云轻量应用服务器2核2G3M带宽轻量服务器一年108元,2核4G4M带宽轻量服务器一年297.98元12个月;阿里云ECS云服务器e系列2核2G配置182元一年、2核4G配置365元一年、2核8…...
前端 JS 经典:Math 常用方法汇总
1. Math.ceil 向上取整 Math.ceil(1.2) // 2 2. Math.floor 向下取整 Math.floor(1.2) // 1 3. Math.round 四舍五入 Math.round(1.4) // 1 Math.round(1.6) // 2 4. Math.random 0-1 随机数 Math.random() // 0.2745798547204079 5. Math.max 返回大值 Math.max(1.2,…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...
家政维修平台实战20:权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系,主要是分成几个表,用户表我们是记录用户的基础信息,包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题,不同的角色…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的,根据Excel列的需求预估的工时直接打骨折,不要问我为什么,主要…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...
WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章?AI自动生成,效率提升10倍! 支持多语言、自动配图、定时发布,让内容创作更轻松! AI内容生成 → 不想每天写文章?AI一键生成高质量内容!多语言支持 → 跨境电商必备&am…...
鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题:docker pull 失败 网络不同,需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点,但无自动故障转移能力,Master宕机后需人工切换,期间消息可能无法读取。Slave仅存储数据,无法主动升级为Master响应请求ÿ…...
uniapp中使用aixos 报错
问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
