关于使用canvas导出图片代码，可参考我上篇博客 canvas 导出为图片兼容ie10+，谷歌，火狐等浏览器，代码详解: https://www.jianshu.com/p/9b3ad5bc131c
上面的代码没有问题，对于其他2d效果是可以导出的。但是直接这样导出threejs或者webgl的效果会有问题，导出的将不是我们看到的效果。这个问题的出现是因为基于性能和兼容性的考量，默认情况下浏览器会在绘制完成后清除WebGL canvas的缓存。
下面先复现这个问题：
现有使用threejs写的如下效果：
animate2.gif
直接导出：
image.png
可以看到导出的图片什么都没有
解决办法一：在你捕获截图前调用一次渲染代码render：
image.png
导出效果：
image.png
解决办法二：在创建 WebGLRenderer的时候传入 preserveDrawingBuffer: true。
image.png
导出效果：
image.png
以上两种方式任取一种即可。
来都来了，点个赞再走吧！
本文地址：https://www.jianshu.com/p/30f11ba31bda，转载请注明出处，谢谢。
