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 截图透明空🤣的更多相关文章

  1. html2canvas实现浏览器截图的原理(包含源码分析的通用方法)

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...

  2. html2canvas - 实现网页截图(+下载截图) 功能

    实现:html2canvas + canvas.toDataURL 首先,引入依赖插件: import { html2canvas } from './html2canvas'; html2canva ...

  3. 使用 html2canvas 实现浏览器截图

    基于上一篇<h5 本地上传图片预览 源码下载>,今天分享一个图片上传后, 根据所上传的图片颜值随机生成一个答案, 并且可以生成一张专属于自己的名片. 首先上传预览我们已经实现了, 所以接下 ...

  4. 使用html2canvas实现网页截图,并嵌入到PDF

    使用html2canvas实现网页截图并嵌入到PDF 以前我们只能通过截图工具进行截取图像.这使得在业务生产中,变得越来越不方便.目前的浏览器功能越来越强大,H5也逐渐普及,浏览器也可以实现截图了.这 ...

  5. html2canvas.js插件截图空白问题

    发现使用 html2canvas.js插件截图保存在前端很方便.学习过程中预计问题. 截图出现空白和截图不全. 问题原因: html2canvas.js插件截图是基于body标签的,如果body存在滚 ...

  6. Canvas判断内容为空

    如题,项目需要做一个canvas的绘图工具,绘制图纸传递给后台.因此需要做一个非空验证,记录解决方法祝大家早日脱坑. js验证代码: //验证canvas画布是否为空函数function isCanv ...

  7. HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系

    一.前面的所以然 技术的发展日新月异,说不定回家钓几天鱼,就出来个新东西了.新事物新技术发展的初期,你无法预见其未来之趋势,生命诚可贵,没有必要花过多时间深入研究这些新东西,不过,知道了大概,了解个全 ...

  8. HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系 【转】

    HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系 这篇文章发布于 2011年10月10日,星期一,17:14,归类于 canvas相关. 阅读 58013 次, 今日 ...

  9. 使用html2canvas实现浏览器截图

    最近做项目为了解决全局异常信息记录,研究了一下浏览器全屏截图功能,方便用户发现异常时能够快速截图发给管理员.最终记录的异常信息如下,上面的[截图报告管理员]就是使用html2canvas前端插件实现的 ...

随机推荐

  1. Java并发编程的艺术(一)——并发编程的注意问题

    并发编程是为了使程序运行得更快,但是,不是启动更多得线程就能最大限度地执行并发,也不是线程更多就能使得程序运行得更快,而且并发编程更容易产生错误,如果要高效且正确地执行并发,就需要注意这三种问题 上下 ...

  2. C 与 C++ 中 指向二维数组的指针进行指针运算

    二维数组在概念上是二维的,有行和列,但在内存中所有的数组元素都是连续排列的,它们之间没有"缝隙".以下面的二维数组 nums 为例: 从概念上理解,nums 的分布像一个矩阵,但在 ...

  3. bbed工具安装

    1.上传bbedus.msb  bbedus.msg  sbbdpt.o  ssbbded.o四个文件到数据库服务器 [oracle@edgzrip1-PROD1 bbed_10g_src_x32]$ ...

  4. 深入解析 C# 的 String.Create 的方法

    作者:Casey McQuillan 译者:精致码农 原文:http://dwz.win/YVW 说明:原文比较长,翻译时精简了很多内容,对于不重要的细枝末节只用了一句话概括,但不并影响阅读. 你还记 ...

  5. js下 Day16、正则案例

    一.封装格式化日期 功能思路分析: \1. 第一个参数format表示指定的时间格式 \2. 第二个参数date为指定的时间(可以不传,默认当前时间) \3. 获取第二个参数中指定时间的年月日时分秒 ...

  6. 拥抱云原生,如何将开源项目用k8s部署?

    微信搜索[阿丸笔记],关注Java/MySQL/中间件各系列原创实战笔记,干货满满. k8s以及云原生相关概念近年来一直比较火热,阿丸最近搞了个相关项目,小结一下. 本文将重点分享阿里开源项目otte ...

  7. 分布式文件系统之 FastDFS

    FastDFS 百度百科 FastDFS 是一个开源的轻量级分布式文件系统,它对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,解决了大容量存储和负载均衡的问题.特别适合 ...

  8. C#随机生成不重复邀请码&创建登录Token&转换人民币大小金额

    /// <summary> /// 创建登陆Token /// </summary> /// <param name="length">< ...

  9. 老吕教程--01后端Node.js框架搭建(安装调试KOA2)

    今天开始从零搭建后端框架,后端框架基于Koa2,通过Typescript语言编写. 在写后端框架之前,自己也了解过Express,感觉Koa2更加灵活,由于有多年后端研发经验,所以采用Koa2,简单敏 ...

  10. FeignClient spi 调用 短路异常 & 线程池配置

    FeignClient spi 调用 短路异常 & 线程池配置 默认配置见:HystrixThreadPoolProperties 线程池对象:com.netflix.hystrix.Hyst ...