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前端插件实现的 ...
随机推荐
- C# 高性能对象映射
1.之前在使用AutoMapper 框架感觉用着比较不够灵活,而且主要通过表达式树Api 实现对象映射 ,写着比较讨厌,当出现复杂类型和嵌套类型时性能直线下降,甚至不如序列化快. 2.针对AutoMa ...
- 工作笔记——CPLD与MCU通过SPI通信
一.需求描述 MCU需要接收来自CPLD的升级固件数据 CPLD对MCU只进行发送数据,不接收MCU的数据 CPLD无法告知数据传输的开始和结束,需要MCU自行判断(CPLD只是数据透传,不做数据判断 ...
- IOS实现自动定位和手动选择城市功能
IOS自动定位使用的是高德地图SDK 在高德开放平台http://lbs.amap.com/api/ios-sdk/down/ 下载2D地图SDK和搜索SDK 将SDK导入工程内 按照高德的配置说明进 ...
- IDEA将Java Web项目打war包
准备工作 1.IntelliJ IDEA开发工具 2.可以正常运行的Java Web项目 打war包流程 1.使用快捷键Ctrl+Alt+Shift+s 或者 鼠标点击选中项目名按F4 打开 Proj ...
- Spring Cloud Ribbon之URL重构(三)
接着前面的说,前两篇中分析了解析和动态服务列表的获取,这两步完成后那接下来要做的事就是重组解析后的URL路径和发起通信了,这一步完成应该是在前面分析的RibbonLoadBalancerClient. ...
- 工具-Redis-django存储session(99.6.4)
@ 目录 1.说明 安装 修改设置 2.测试 关于作者 1.说明 之前django的session默认是存在的数据库里面的,我们也可以把session存储在redis里面 安装 pip install ...
- SQL:我为什么慢你心里没数吗?
SQL 语句执行慢的原因是面试中经常会被问到的,对于服务端开发来说也是必须要关注的问题. 在生产环境中,SQL 执行慢是很严重的事件.那么如何定位慢 SQL.慢的原因及如何防患于未然.接下来带着这些问 ...
- 用Python批量裁取图,来获取文件夹中所有图片名
批量截图(截取正方形图,哪个边短就用哪个边作为标准来截取) 功能是裁取图片中红色框的部分. 代码为: import sys from tkinter.tix import Tk from PIL im ...
- NET 5 MemoryCache与Redis使用以及StackExchange.Redis和CSRedisCore
简介以及区别 ASP.NET Core 缓存Caching,.NET Core 中为我们提供了Caching 的组件. 目前Caching 组件提供了三种存储方式. Memory Redis SqlS ...
- PhPMyadmin拿Shell
phpmyadmin 是一个以PHP为基础,以Web-Base方式架构在网站主机上的MySQL的数据库管理工具, --百度百科 1.入口寻找 目录扫描: 根据Linux对大小写敏感判断目标服 ...