threejs 保存图片并且下载

原创已于 2023-08-22 13:51:21 修改 · 10w+ 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#javascript #开发语言 #ecmascript

于 2022-07-30 13:03:35 首次发布

该博客介绍了如何利用JavaScript实现将Three.js渲染的canvas内容保存为PNG图片。通过创建一个超链接元素，设置其href属性为canvas的dataURL，并触发点击事件来下载文件。这个方法对于想要导出Three.js场景作为静态图像的开发者非常有用。

   function saveFile() {
            // 创建一个超链接元素，用来下载保存数据的文件
            var link = document.createElement('a');
            // 通过超链接herf属性，设置要保存到文件中的数据
            var canvas = renderer.domElement;//获取canvas对象
            link.href = canvas.toDataURL("image/png");
            link.download = 'threejs.png'; //下载文件名
            link.click(); //js代码触发超链接元素a的鼠标点击事件，开始下载文件到本地
        }