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前端插件实现的 ...
随机推荐
- cocosCreator微信小游戏排行榜思路
cocosCreator制作微信小游戏排行榜实现方案: 游戏认知:项目分为主域和子域,主域就是游戏主程部分,子域为单独处理微信排行榜公共域数据的. 游戏主域里创建一个节点,添加WXSubContext ...
- Docker部署Portainer搭建轻量级可视化管理UI
1. 简介 Portainer是一个轻量级的可视化的管理UI,其本身也是运行在Docker上的单个容器,提供用户更加简单的管理和监控宿主机上的Docker资源. 2. 安装Docker Doc ...
- [小专题]另一种字符串匹配的思路——Shift-And算法
吐槽:前两天打组队赛遇到一个字符串的题考了这个(见:http://acm.hdu.edu.cn/showproblem.php?pid=5972 ) 当时写了个KMP瞎搞然后TLE了(害),赛后去查了 ...
- post 和php://input
$_POST['paramName'] 获取通过表单(multipart/form-data)提交的数据.但有时客户端会直接将请求数据以字符串的形式都放到 body 里传递过来,那么服务端就需要使用 ...
- 一目了然的 Node.js Windows10 安装篇
本篇文章 介绍 NodeJS 的安装 及环境变量配置 Node JS 的 了解 1.Node.js简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于 ...
- js深克隆与浅克隆
定义: 浅克隆: 克隆对象的一层属性, 如果对象还有对象的话,里面的对象没有进行克隆,只是把地址给了别人.也可以理解为只是简单的克隆了躯体,但是没有得到其灵魂: 深克隆:克隆对象的多层属性,对象里面还 ...
- Telegraf+Influxdb+Grafana自动化运维监控
概述:Telegraf收集信息,influxdb时序数据库存储数据,grafana平台展示数据,并进行监控告警,组成一个自动化运维监控平台. 一.influxdb InfluxDB是一个由Infl ...
- 麦格理银行借助DataStax Enterprise (DSE) 驱动数字化转型
在本文中,我们将介绍DataStax Enterprise是如何助力澳大利亚最大的投资银行麦格理银行的数字银行,实现了实时分析和自然语言搜索等多项功能,并为用户提供了个性化的用户体验. "D ...
- 本地缓存性能之王Caffeine
前言 随着互联网的高速发展,市面上也出现了越来越多的网站和app.我们判断一个软件是否好用,用户体验就是一个重要的衡量标准.比如说我们经常用的微信,打开一个页面要十几秒,发个语音要几分钟对方才能收到. ...
- JavaScript获取页面元素方法