threeJS 使用 html2canvas截图为黑色的问题

实际错误是

所有的webGL以及three的容器截图都为黑色的背景，其他元素无恙

截图日志的报错为：

控制台输出.png

在这个问题解决之前尝试的办法有：

1. 疑似跨域问题：

   修改`html2canvas` 的配置，使用`{useCORS:true}`     --无效
   

2. 意思元素样式问题

    修改dom样式为绝对值，去除百分比以及相对定位  --无效
   

求人之前先百度找到了一个网上教程，解决方法如下

可以看到：preserveDrawingBuffer = false

image.png

在框架中使用的话比较麻烦，同时也不能成功，于是通过看官方文档

解决办法

解决这个问题只需要在three 的renderer的配置中的preserveDrawingBuffer设置为true就好

initRender() {
      this.renderer = new THREE.WebGLRenderer({
        //增加下面两个属性，可以抗锯齿
        antialias: true,
        //将这个属性改为True可以解决截图为黑色的问题
        preserveDrawingBuffer: true
      });
      let width = this.$refs["canvas"].clientWidth;
      let height = this.$refs["canvas"].clientHeight;
      this.renderer.setSize(width, height); //设置渲染区域尺寸
      this.renderer.setClearColor(0xe5e5e5, 1); //设置背景颜色
      this.$refs["canvas"].appendChild(this.renderer.domElement); //body元素中插入canvas对象
    },

---

But

在博客 中看到下面内容，还需要你们自己测试一下

只是为了截图设置preserveDrawingBuffer为true，会导致性能下降。
大概就是preserveDrawingBuffer为true的时候，需要从A缓冲区复制到B缓冲。
为false的时候是，交换双缓冲，比较快。
方法就是获取截图的时候调用renderer.render()，不让canvas清空就可以不用设置preserveDrawingBuffer为true了。