實際錯誤是
所有的webGL以及three的容器截圖都為黑色的背景最疆，其他元素無恙
截圖日志的報錯為：
控制臺輸出.png
在這個問題解決之前嘗試的辦法有：
-
疑似跨域問題：
修改`html2canvas` 的配置次慢，使用`{useCORS:true}` --無效 -
意思元素樣式問題
修改dom樣式為絕對值樊卓，去除百分比以及相對定位 --無效
求人之前先百度找到了一個網(wǎng)上教程串纺，解決方法如下
可以看到：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); //設置渲染區(qū)域尺寸
this.renderer.setClearColor(0xe5e5e5, 1); //設置背景顏色
this.$refs["canvas"].appendChild(this.renderer.domElement); //body元素中插入canvas對象
},
But
在博客 中看到下面內容，還需要你們自己測試一下
只是為了截圖設置preserveDrawingBuffer為true托享，會導致性能下降骚烧。
大概就是preserveDrawingBuffer為true的時候，需要從A緩沖區(qū)復制到B緩沖闰围。
為false的時候是赃绊，交換雙緩沖，比較快羡榴。
方法就是獲取截圖的時候調用renderer.render()碧查，不讓canvas清空就可以不用設置preserveDrawingBuffer為true了。
