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. 宝塔linux面板防护CC设置

    使用宝塔linux面板很多用户受到CC攻击不知如何防范. 下面讲下如何利用宝塔自带的功能来进行基本的CC防护. 首先是在nginx上有个waf安全模块,里面有CC防护设置.(要求nginx为1.12版 ...

  2. JavaScript中遍历的几种方法

    1.while循环 while后面跟循环条件和执行语句,只要满足条件,就会一直执行里面的执行 var i = 0 while(){ console.log(i) i++ } 2.do...while循 ...

  3. 怎样用Java 8优雅的开发业务

    怎样用Java 8优雅的开发业务 目录 怎样用Java 8优雅的开发业务 函数式编程 流式编程 基本原理 案例 优雅的空处理 新的并发工具类CompletableFuture 单机批处理多线程执行模型 ...

  4. 如何最简单、通俗地理解Python的文件?

    原文链接:https://www.zhihu.com/question/431437471/answer/1588566615 一.笔记 1) Python文件 ① Python文件后缀一般以 .py ...

  5. 5行Python代码就能实现刷爆全网的动态条形图!

    说起动态图表,最火的莫过于动态条形图了. 在B站上搜索「数据可视化」这个关键词,可以看到很多与动态条形图相关的视频. 好多视频都达到了上百万的播放量,属实厉害. 目前网上实现动态条形图现成的工具也很多 ...

  6. 常用Appium API

    以最右App为例 .apk文件网盘地址: 链接:https://pan.baidu.com/s/1L4MYkhpb5ECe8XeaneTx_Q 提取码:0jqm 操作类API # -*- coding ...

  7. js Table表格选中一行变色或者多选 并获取值

    使用JQ <script> let old, oldColor; $("#sp_body tr").click(function (i) { if (old) oldC ...

  8. mysql 5.7 主从复制搭建及原理

    1. 主从复制搭建 1.1 环境准备 OS: Ubuntu 18.04 master: 192.168.0.3 slave: 192.168.0.6 1.2 安装依赖包 # Ubuntu apt-ge ...

  9. 微信小程序--每周图书推荐

    这是我个人的第一个原生微信小程序,作为一枚萌新,自己没有前端经历,所以代码很混乱,界面很简单,难度也很低,主要用来记录自己学小程序过程中遇到的问题. 一. 先上预览图 左右滑动切换每周推荐的图书,点击 ...

  10. [leetcode]24. Swap Nodes in Pairs交换链表的节点

    感觉这个题后台的运行程序有问题,一开始自己想的是反转链表那道题的方法,只是隔一个节点执行一次,但是没有通过,TLE了,但是很奇怪,并没有死循环,就是最后返回的时候超时. 最后的思路就是很简单的进行交换 ...