關于使用canvas導出圖片代碼，可參考我上篇博客 canvas 導出為圖片兼容ie10+，谷歌，火狐等瀏覽器，代碼詳解: http://www.lxweimin.com/p/9b3ad5bc131c
上面的代碼沒有問題，對于其他2d效果是可以導出的。但是直接這樣導出threejs或者webgl的效果會有問題，導出的將不是我們看到的效果。這個問題的出現是因為基于性能和兼容性的考量，默認情況下瀏覽器會在繪制完成后清除WebGL canvas的緩存。
下面先復現這個問題：
現有使用threejs寫的如下效果：
animate2.gif
直接導出：
image.png
可以看到導出的圖片什么都沒有
解決辦法一：在你捕獲截圖前調用一次渲染代碼render：
image.png
導出效果：
image.png
解決辦法二：在創(chuàng)建 WebGLRenderer的時候傳入 preserveDrawingBuffer: true。
image.png
導出效果：
image.png
以上兩種方式任取一種即可。
來都來了，點個贊再走吧！
本文地址：http://www.lxweimin.com/p/30f11ba31bda，轉載請注明出處，謝謝。
