ThreeJS-截屏下载pdf或者图片时白屏

JS-页面截图下载为pdf
关于如何下载为 pdf 在上面的这篇文章中有写,大家可以看下,下载图片代码在最下面
这时我们发现 three 部分是空白的如下:
在这里插入图片描述
这就多少有点尴尬了,这时我们习惯性的看下后台报错
在这里插入图片描述
是不是发现了惊喜,html2canvas其实已经给我报错了,而且还很贴心的给出了解决方案,我们先上代码:

renderer = new THREE.WebGLRenderer({ antialias: true,  // 启用抗锯齿功能preserveDrawingBuffer: true
});

其实就是给 WebGLRenderer 多传了一个参数,那这个是什么意思呢?请添加图片描述
官方解释:是否保留缓冲区直到手动清除或重写。默认值为false。
preserveDrawingBuffer 是一个WebGL渲染器选项,用于确定是否在多个渲染循环中保留drawing buffer。如果设置为true,则drawing buffer在多个渲染循环中会被保持,这可以提高性能,但可能会占用更多的内存。

请注意,这个选项在WebGL渲染器的默认行为中并不常用,因为通常WebGL会在每次渲染后自动清除drawing buffer。设置preserveDrawingBuffer为true可能会导致性能问题或内存问题,特别是如果你在渲染循环中不断请求帧缓存的像素数据。

下载为图片:

const downloadPDF = () => {const element: any = document.querySelector('.app');// const { scrollHeight, scrollWidth, offsetHeight, height } = element;const opts = {scale: 3, // 缩放比例,提高生成图片清晰度useCORS: true, // 允许加载跨域的图片allowTaint: false, // 允许图片跨域,和 useCORS 二者不可共同使用tainttest: true, // 检测每张图片都已经加载完成logging: true, // 日志开关,发布的时候记得改成 falseheight: element.offsetHeight};html2canvas(element, opts).then((canvas) => {const link = document.createElement('a');// 通过超链接herf属性,设置要保存到文件中的数据link.href = canvas.toDataURL("image/png");link.download = 'aaa.png'; // 下载文件名link.click(); // js代码触发超链接元素a的鼠标点击事件,开始下载文件到本地});
};

请大家注意如果 three 中有用到 CSS2DRenderer 或者 CSS3DRenderer,这个也要加

labelRenderer = new CSS2DRenderer({preserveDrawingBuffer: true
});

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

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

相关文章

足底筋膜炎怎么治疗效果好得快

足底筋膜炎症状:疼痛是足底筋膜炎最典型和常见的症状。患者通常会感到足跟或足底区域的疼痛,这种疼痛可能表现为刺痛、钝痛或灼热感。疼痛的程度和频率因人而异,但通常会在早晨起床后或长时间休息后首次站立时最为明显。这是因为休息时足底筋…

.NET C# 读写CSV及转换DataTable

目录 .NET C# 读写CSV及转换DataTable1. 依赖库2. CSVUtil2.1 CSV 转 DataTable2.2 DataTable 转 CSV 文本2.3 DataTable 转 CSV2.4 私有方法 .NET C# 读写CSV及转换DataTable 1. 依赖库 using System.Data; using System.IO; using System.Text; using System.Text.RegularE…

eclipse宝刀未老

Theia 是一个高度可定制的、开源的、基于 Web 的集成开发环境(IDE)框架。它由 Eclipse Foundation 主导,旨在为云和本地环境提供现代化的、全功能的 IDE 解决方案。Theia 的核心目标是提供一个灵活的平台,开发者可以根据自己的需求…

睡眠脑电 | 多导睡眠图技术

摘要 多导睡眠图(PSG)一词由Holland等人于1974年提出,用于描述在睡眠期间同时记录、分析和解释多个生理特征。PSG是诊断睡眠障碍患者和增进我们对正常睡眠认识的重要工具。这是一个复杂的过程,应由训练有素的技术人员执行。本文回顾了多导睡眠图(PSG)的…

头歌----恶意流量监测

第一关:RE库的使用 任务描述 本关任务:编写一个能正则匹配出 ip 地址的小程序。 相关知识 为了完成本关任务,你需要掌握: re 的主要功能函数;re.search 函数;例子。 re 的主要功能函数 常用的功能函…

【设计模式之基于特性的动态路由映射模式】

在ASP.NET Core中,路由是核心功能之一,用于将HTTP请求映射到相应的控制器操作。虽然“路由驱动设计模式”是一个我刚杜撰出来的设计模式名称,但我们可以基于ASP.NET Core的路由特性,构建一种以路由为中心的设计模式。 以下是一个…

C#.Net筑基-类型系统②常见类型

01、结构体类型Struct 结构体 struct 是一种用户自定义的值类型,常用于定义一些简单(轻量)的数据结构。对于一些局部使用的数据结构,优先使用结构体,效率要高很多。 可以有构造函数,也可以没有。因此初始…

独孤思维:副业闷声发财,没有多少人希望你好

01 做副业,一定要留有余地。 害人之心不可有,防人之心不可无。 很多人,喜欢晒收益,喜欢吹嘘多牛b。 被同行盯上,看着眼红,反手就各种搞事情。 独孤经历过,也看到过很多同行被搞过。 不要公…

阿里又出AI神器,颠覆传统图像编辑,免费开源!

文章首发于公众号:X小鹿AI副业 大家好,我是程序员X小鹿,前互联网大厂程序员,自由职业2年,也一名 AIGC 爱好者,持续分享更多前沿的「AI 工具」和「AI副业玩法」,欢迎一起交流~ 最近阿里开源了 Mi…

C#面:阐述 POCO 是什么意思

POCO是“Plain Old CLR Object”的缩写,意为“普通的旧CLR对象”。它是一种编程模式,用于描述一个简单的、纯粹的C#对象,没有任何特殊的依赖或框架限制。POCO对象通常只包含属性和方法,没有任何特殊的基类或接口。 在C#中&#x…

003.Linux SSH协议工具

我 的 个 人 主 页:👉👉 失心疯的个人主页 👈👈 入 门 教 程 推 荐 :👉👉 Python零基础入门教程合集 👈👈 虚 拟 环 境 搭 建 :👉&…

国内 大数据平台

国内有多个类似阿里云天池大数据平台的数据集平台,这些平台主要提供开源数据集、数据竞赛、数据分析工具等资源,帮助数据科学家、研究人员和企业进行数据分析与机器学习开发。以下是一些较为知名的国内平台: 1. DataFountain(Dat…

MySQL字符集与 排序规则 详解

在MySQL中,字符集(Character Set)和排序规则(Collation)是两个至关重要的概念,它们共同决定了数据库中数据的存储和检索方式。本文将详细解析MySQL中的字符集和排序规则,帮助读者更好地理解它们…

python中的特殊方法使用

__new__()构造器 范例:使用“__new__()”方法 # coding : utf-8class Message: # 默认object子类def __new__(cls, *args, **kwargs): # 特殊方法print("【new】cls %s、args %s、kwargs …

最新麻豆MDYS14源码 油条视频 苹果CMS系统 附搭建教程

在数字化的时代,视频网站已经成为人们获取娱乐和信息的主要渠道之一。而在众多的视频网站中,使用麻豆MDYS14源码搭建的网站无疑是最具有吸引力的。本文将为你介绍麻豆MDYS14源码的基本特性,以及如何利用它打造一款完美的视频网站。 首先&…

如何设计实现一个分布式注册中心

1、确定需求和目标 服务发现:客户端能够查找和连接到服务提供者。 负载均衡:将请求分发到不同的服务提供者实例上。 容错处理:能够处理服务提供者的故障,并确保系统的可用性和健壮性。 高可用性和可扩展性:能够处理…

记录一次mysql长事务的经历

目录 一.项目介绍 二.问题暴漏 三.问题排查 1.连接池方向 2.数据库方向 四.代码模拟 五.错误原因分析 1.MySQL参数优化 2.代码优化 六.总结 一.项目介绍 项目是springbootnacos的微服务架构,商城购物类系统,分多个服务,问题出现在众多服务中的单个服务 二.问题暴漏…

李光明从程序员到架构师的逆袭之路(四)

来上海已经第四天了,今天整日里雨丝绵绵,但这并未能阻挡我探索这座城市的热情。晚上,我和几位朋友相约一同出去逛逛,亲身感受上海这座国际一线城市的独特魅力。 上海,这座被誉为“东方明珠”的城市,以其独…

CAD二次开发(11)-在用C#进行CAD开发SQLite和SqlSugar的使用

1. System.Data.SQLite的使用 1.1 包的引入 利用 Nuget引入其相关包 1.2 App.config配置引入到CAD 因为我们当前的项目是类库项目,需要依托于宿主程序才可以运行,所以我们就得需要将SQLite自动生成的App.config里面的部分配置移植到CAD的配置文件中…

DC/AC电源模块:为医疗设备提供安全可靠的电力转换

BOSHIDA DC/AC电源模块:为医疗设备提供安全可靠的电力转换 DC/AC电源模块是一种用于将直流电源转换为交流电源的设备,广泛应用于各种医疗设备中。它们的主要功能是为医疗设备提供安全可靠的电力转换,以确保这些设备在工作过程中提供稳定的电…