uniapp的video组件截图(抓拍)功能,解决截后为黑图bug

news2024/12/1 5:46:24

废话不多说先上代码!!!!

点击截图按钮触发以下方法

getCapture() {
				let _this = this
				let pages = getCurrentPages();
				let page = pages[pages.length - 1];
				let ws = page.$getAppWebview();
				let bitmap = new plus.nativeObj.Bitmap('test');
				// 将webview内容绘制到Bitmap对象中
				ws.draw(bitmap,function(){
						setTimeout(function() {
							this.base64img = ''
							console.log('截屏绘制图片成功');
							// 将原生Bitmap转换成Base64字符串
							_this.base64img = bitmap.toBase64Data();
							this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video
							this.videoContext.play();
							//console.log('截屏图片===='+_this.base64img);
							bitmap.clear(); // 清除Bitmap对象 
 						}, 100);
					
					},(e) => {
						console.log('截屏绘制图片失败:', e);
						bitmap.clear(); // 清除Bitmap对象 
					},
					{
						check: true, // 设置为检测白屏
						clip: { top: uni.getSystemInfoSync().statusBarHeight + 75, left: '0px', height: '300px', width: '100%' } // 设置截屏区域
					}
				);
				
			},

但是,这个方法不全面,在此之前需要暂停视频播放来实现截图,否则可能会出现截图为黑图的bug

this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video
			  this.videoContext.pause();

这句话你可以放在截图按钮触发的方法中,这两句话的作用就是指向你的video组件并且暂停播放,然后使用延时函数把上面方法放到该延时函数中调用,方法如下

takeScreenshot() {
			  this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video
			  this.videoContext.pause();
			  let _this = this
			  setTimeout(function(){
				  _this.$nextTick(() => {
					  _this.getCapture();
				  });
			  },500)
			},

如果对官网文档感兴趣,自行点击查看:HTML5+ API Reference

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2250911.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

学成在线day08

部署静态页面 相关操作:https://mx67xggunk5.feishu.cn/wiki/FLozwxrrxihTJbkyTHgchDt4nUc nginx的最终配置文件: worker_processes 1; events {worker_connections 1024; } http {include mime.types;default_type application/octet-strea…

mysql之找回忘记的root密码

mysql之找回忘记的root密码 1.方法1,init-file重置密码2.方法2,–skip-grant-tables重置密码 1.方法1,init-file重置密码 使用init-file参数来对密码进行重新设置 1.停止mysql服务进程 首先将mysql的服务停用掉; 输入命令&#x…

ROS VSCode调试方法

VSCode 调试 Ros文档 1.编译参数设置 cd catkin_ws catkin_make -DCMAKE_BUILD_TYPEDebug2.vscode 调试插件安装 可在扩展中安装(Ctrl Shift X): 1.ROS 2.C/C 3.C Intelliense 4.Msg Language Support 5.Txt Syntax 3.导入已有或者新建ROS工作空间 3.1 导入工作…

力扣--LCR 152.验证二叉搜索树后序遍历

请实现一个函数来判断整数数组 postorder 是否为二叉搜索树的后序遍历结果。 提示&#xff1a; 数组长度 < 1000 postorder 中无重复数字代码 class Solution { public boolean verifyPostorder(int[] postorder) { if(postorder null){ return true; } return f(postor…

LeetCode 力扣 热题 100道(十一)字母异位词分组(C++)

给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 排序字符&#xff1a;对于每个字符串&#xff0c;我们将其字符排序&#xff0c;得到一个唯一的 "排序后的字母&qu…

【Anaconda】 创建环境报错:CondaHTTPError: HTTP 000 CONNECTION FAILED for url

问题描述 使用 Anaconda 创建环境时报错&#xff1a; CondaHTTPError: HTTP 000 CONNECTION FAILED for url <https://repo.anaconda.com/pkgs/free/noarch/repodata.json.bz2> Elapsed: -An HTTP error occurred when trying to retrieve this URL. HTTP errors are o…

CC-Link IEFB转Modbus TCP三菱FX5U与施耐德M580通讯案例

一. 案例背景 在现代工业自动化领域&#xff0c;企业为了构建高效、灵活的生产系统&#xff0c;往往会选用不同品牌的设备。在自动化控制场景中&#xff0c;施耐德M580系列PLC则以其强大的处理能力和先进的功能&#xff0c;在复杂的过程控制和大型系统集成方面表现出色&#xf…

【VUE3】新版Vue3+ElementPlus全家桶开发视频项目实战

VUE 介绍 Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。 Vue.js是一个MVVM(Model - View - ViewModel)的SPA框架。 Model:数…

常用函数的使用错题汇总

#include <iostream> #include <fstream> #include <string>int main() {std::ifstream fin("example.txt"); // 创建 ifstream 对象并打开文件// 检查文件是否成功打开if (!fin) {std::cerr << "Error opening file!" << s…

Android电视项目焦点跨层级流转

1. 背景 在智家电视项目中&#xff0c;主要操作方式不是触摸&#xff0c;而是遥控器&#xff0c;通过Focus进行移动&#xff0c;确定点击进行的交互&#xff0c;所以在电视项目中焦点、选中、确定、返回这几个交互比较重要。由于电视屏比较大&#xff0c;在一些复杂页面中会存…

Linux -初识 与基础指令1

博客主页&#xff1a;【夜泉_ly】 本文专栏&#xff1a;【Linux】 欢迎点赞&#x1f44d;收藏⭐关注❤️ 文章目录 &#x1f4da; 前言&#x1f5a5;️ 初识&#x1f510; 登录 root用户&#x1f465; 两种用户➕ 添加用户&#x1f9d1;‍&#x1f4bb; 登录 普通用户⚙️ 常见…

Oracle12.2 RAC集群管理修改IP地址(DNS解析)

Oracle12.2 RAC集群管理之修改IP地址 该章节实验是基于此章节基础上操作&#xff1a; Oracle LinuxR7安装Oracle 12.2 RAC集群实施&#xff08;DNS解析&#xff09;-CSDN博客 环境 改前IP&#xff1a; 172.30.21.101 hefei1 hefei1.hefeidb.com 172.30.21.102 hefei2 …

Git——本地仓库链接并推送到多个远程仓库

步骤 1. 新建仓库init 或 删除已有仓库远程链接 // 1.新建init git init// 2.已有仓库&#xff0c;查看链接的远程仓库 git remote -v// 3.已有远程连接仓库&#xff0c;需要删除连接 git remote rm origin(或对应远程仓库名) 2.新建远程仓库 在gitee、github等托管平台创建…

IDEA某个Impl下的引入的文件红色

IDEA某个Impl下的引入的文件红色&#xff0c;可以正常启动&#xff0c;而且文件是存在的 1.什么情况下会出现这个问题 我的是在不关闭项目的情况下就把电脑关机了&#xff0c;因为这样第二天开机&#xff0c;启动IDEA就会把昨天关机前所有开启的项目全部开启 &#xff0c;这样有…

docker使用(镜像、容器)

docker基础使用 文章目录 前言1.镜像操作1.1命令介绍1.2.案例实操1.2.1查找镜像1.2.2下载镜像1.2.3查看当前镜像 2.容器操作2.1命令2.1.1容器创建与启动2.1.2. 容器查看2.1.3. 容器操作2.1.4. 容器删除2.1.5. 容器日志2.1.6. 容器内文件操作2.1.7. 容器内命令执行2.1.8. 其他常…

6.STM32之通信接口《精讲》之IIC通信---硬件IIC(STM32自带的硬件收发器)

上一节&#xff0c;完成了对IIC软件的实验程序&#xff0c;也就是说只要我们编程能够模拟IIC协议规定的时序&#xff0c;所有IIC的外设就能解析IIC的读出我们数据&#xff0c;就能和相关IIC外设进行交互&#xff0c;然后&#xff0c;STM32自带硬件收发电路&#xff0c;接下来我…

springboot337校园失物招领系统pf(论文+源码)_kaic

校园失物招领网站的设计与实现 摘要 近年来&#xff0c;信息化管理行业的不断兴起&#xff0c;使得人们的日常生活越来越离不开计算机和互联网技术。首先&#xff0c;根据收集到的用户需求分析&#xff0c;对设计系统有一个初步的认识与了解&#xff0c;确定校园失物招领网站…

智能探针技术:实现可视、可知、可诊的主动网络运维策略

网络维护的重要性 网络运维是确保网络系统稳定、高效、安全运行的关键活动。在当今这个高度依赖信息技术的时代&#xff0c;网络运维的重要性不仅体现在技术层面&#xff0c;更关乎到企业运营的方方面面。网络运维具有保障网络的稳定性、提升网络运维性能、降低企业运营成本等…

mybatis笔记01——初始配置

JavaEE三层架构&#xff1a;表现层&#xff08;负责与用户的交互&#xff0c;通常实现了用户界面&#xff09;、业务逻辑层&#xff08;处理核心业务规则和逻辑&#xff0c;是应用程序的“心脏”。&#xff09;、数据访问层&#xff08;负责与数据源&#xff08;如数据库&#…

第7篇 寻找最大数___ARM C语言程序<三>

Q&#xff1a;可以将寻找到的最大数结果显示在DE1-SoC开发板的硬件外设如红色LED上吗&#xff1f; A&#xff1a;基本原理&#xff1a;对红色LED的Data寄存器进行写操作即可。DE1-SoC_Computer系统上连接到红色LED的并行端口的内存映射地址为0xFF200000&#xff0c;是一个18位…