基于Threejs截图的小心得

一直都在学习，第一次发文分享一点关于threejs截屏的内容。

刚开始选择了使用html2canvas插件： html2canvas是一个HTML渲染器,在用户浏览器截取页面或部分网页的截屏。 底层是基于DOM节点，根据页面上可用的信息构建屏幕截图。它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。

简单来说html2canvas就是先将html转成canvas，使用canvas.toDataURL方法将canvas对象转换为base64位编码再生成图片。

使用方法如下： 先进行安装：npm install --save html2canvas

html页面:

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

js:

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

尝试发现发现获取不到webgl的内容，生成图片为空白，可能是以下原因：

• 由于材质加载发生了跨域问题，导致获取到的canvas无法正确显示；
• 未开启preserveDrawingBuffer，但是由于内容过多，开启此参数会造成页面卡顿；

经过排查发现renderer.domElement.toDataURL()获取到的图片是空白，于是经历了各大AI的搜索，没得到合适的解决方案。 最终还是回到了官方案例查找，找到了对应的例子'webgl_raymarching_reflect'，问题的关键在于缺少渲染步骤： renderer.render( scene, camera );，加上一行代码成功解决问题。

以下是截图并保存的代码：

renderer.render( scene, camera );

// 创建一个 <a> 标签用于下载
const link = document.createElement('a');
link.href = renderer.domElement.toDataURL(); // 设置图像的 base64 数据
link.download = 'webgl-scene.jpg'; // 设置下载文件名
document.body.appendChild(link);
link.click(); // 触发下载
document.body.removeChild(link); // 移除 <a> 标签

遇到新的需求和问题还是要多看官方文档和案例，也许可以节省很多时间。