html2canvas canvas webgl 截图透明空🤣
1. React用这个插件html2canvas完成div截图功能,div里面嵌套canvas,返回base64是透明图片。
html2canvas(document.getElementById("modelWrapper"), {
allowTaint: true,
useCORS: true
}).then(canvas => {
var base64 = canvas.toDataURL();
//do someing
});
2. 一般的canvas是不会遇到这个问题的,科学-上网了一圈,大概知道是这个参数的原因:preserveDrawingBuffer,如果是ThreeJS就简单了,渲染时加上这个参数就行了。
this.renderer = new THREE.WebGLRenderer({
preserveDrawingBuffer: true
})
3. 但是我的情况比较复杂,是用这个插件react-unity-webgl加载Unity3D模型,渲染后自动生成的,也是基于webgl协议的。我是不懂Unity那套东西的,所以顺着webgl这个思路,我在模型包含的几个文件中找到了这个preserveDrawingBuffer参数,在web.json中,所以这个文件应该是模型加载时的配置之一吧。


4. 重新加载模型,执行代码,截图成功。
html2canvas canvas webgl 截图透明空🤣的更多相关文章
- html2canvas实现浏览器截图的原理(包含源码分析的通用方法)
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...
- html2canvas - 实现网页截图(+下载截图) 功能
实现:html2canvas + canvas.toDataURL 首先,引入依赖插件: import { html2canvas } from './html2canvas'; html2canva ...
- 使用 html2canvas 实现浏览器截图
基于上一篇<h5 本地上传图片预览 源码下载>,今天分享一个图片上传后, 根据所上传的图片颜值随机生成一个答案, 并且可以生成一张专属于自己的名片. 首先上传预览我们已经实现了, 所以接下 ...
- 使用html2canvas实现网页截图,并嵌入到PDF
使用html2canvas实现网页截图并嵌入到PDF 以前我们只能通过截图工具进行截取图像.这使得在业务生产中,变得越来越不方便.目前的浏览器功能越来越强大,H5也逐渐普及,浏览器也可以实现截图了.这 ...
- html2canvas.js插件截图空白问题
发现使用 html2canvas.js插件截图保存在前端很方便.学习过程中预计问题. 截图出现空白和截图不全. 问题原因: html2canvas.js插件截图是基于body标签的,如果body存在滚 ...
- Canvas判断内容为空
如题,项目需要做一个canvas的绘图工具,绘制图纸传递给后台.因此需要做一个非空验证,记录解决方法祝大家早日脱坑. js验证代码: //验证canvas画布是否为空函数function isCanv ...
- HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系
一.前面的所以然 技术的发展日新月异,说不定回家钓几天鱼,就出来个新东西了.新事物新技术发展的初期,你无法预见其未来之趋势,生命诚可贵,没有必要花过多时间深入研究这些新东西,不过,知道了大概,了解个全 ...
- HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系 【转】
HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系 这篇文章发布于 2011年10月10日,星期一,17:14,归类于 canvas相关. 阅读 58013 次, 今日 ...
- 使用html2canvas实现浏览器截图
最近做项目为了解决全局异常信息记录,研究了一下浏览器全屏截图功能,方便用户发现异常时能够快速截图发给管理员.最终记录的异常信息如下,上面的[截图报告管理员]就是使用html2canvas前端插件实现的 ...
随机推荐
- mysql多实例启动、关闭
启动(指定参数文件): [root@mysql01 ~]# mysqld_safe --defaults-file=/data/3306/my.cnf & [root@mysql01 ~]# ...
- x64架构下Linux系统函数调用
原文链接:https://blog.fanscore.cn/p/27/ 一. 函数调用相关指令 关于栈可以看下我之前的这篇文章x86 CPU与IA-32架构 在开始函数调用约定之前我们需要先了解一下几 ...
- Linux查看、开启、关闭防火墙操作
一.防火墙区别 CentOS6自带的防火墙是iptables,CentOS7自带的防火墙是firewall. iptables:用于过滤数据包,属于网络层防火墙. firewall:底层还是使用 ip ...
- SpringCloud 源码系列(4)—— 负载均衡 Ribbon
一.负载均衡 1.RestTemplate 在研究 eureka 源码上篇中,我们在 demo-consumer 消费者服务中定义了用 @LoadBalanced 标记的 RestTemplate,然 ...
- SpringBoot-2.3镜像方案为什么要做多个layer
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- 根据json数据和HTML模板,渲染嵌套的HTML
2020-12-22 11:53:23 星期二 场景, HTML模板是多个div嵌套, 里边有列表, 也有键值对, 与之匹配的有一个json数据, 需要根据json去渲染这个HTML DOM 示例截图 ...
- Python——元组的基本语法(创建、访问、修改、删除)
Python 元组的使用 Python 的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号 ( ),列表使用方括号 [ ]. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可 ...
- Mongodb分布式集群副本集+分片
目录 简介 1. 副本集 1.1 MongoDB选举的原理 1.2 复制过程 2. 分片技术 2.1 角色 2.2 分片的片键 2.3 片键分类 环境介绍 1.获取软件包 2.创建路由.配置.分片等的 ...
- NAT、端口映射、内网穿透、公网IP都是啥
原文地址:https://wuter.cn/1756.html/ 一.IPv4地址 IP协议是为计算机网络相互连接进行通信而设计的协议,它是能使连接到网上的所有计算机网络实现相互通信的一套规则. 这里 ...
- Django 的自我进化
今天是基督文明的传统节日圣诞节.作为一名靠大乐透来实现买房买车梦想的社畜.怎么可能这么早享受节日时光.所以就久了下面这些文字.用来记录一下无聊的下午时光. 本片主要记录Django 中添加一些便利的c ...