javascript Three.js：如何将场景的 2D 快照制作为 JPG 图像？

Three.js: How can I make a 2D SnapShot of a Scene as a JPG Image?

提问by confile

I have a three.js scene like the following:

我有一个 Three.js 场景，如下所示：

            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            var geometry = new THREE.BoxGeometry(1,1,1);
            var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
            var cube = new THREE.Mesh(geometry, material);
            scene.add(cube);

            camera.position.z = 5;

            var render = function () {
                requestAnimationFrame(render);

                cube.rotation.x += 0.1;
                cube.rotation.y += 0.1;

                renderer.render(scene, camera);
            };

            render();

Is it possible to make a 2D SnapShot or ScreenShot from a Scene and export it as a JPG Image?

是否可以从场景制作 2D 快照或屏幕截图并将其导出为 JPG 图像？

回答by Shiva

There are a couple of things you will have to do save the frame as jpg image.

将框架保存为 jpg 图像需要做几件事。

Firstly initialize the webgl context like this

首先像这样初始化webgl上下文

 renderer = new THREE.WebGLRenderer({
                    preserveDrawingBuffer: true
                });

preserveDrawingBufferflag will help you to get the base64 encoding of the current frame The code for that will be something like this

preserveDrawingBuffer标志将帮助您获得当前帧的 base64 编码该代码将是这样的

var strMime = "image/jpeg";
imgData = renderer.domElement.toDataURL(strMime);

Now secondly you might want to save the file using a .jpgextension, but not all browsers allow you to specify the file name. The best solution I found was in this SO thread.

其次，您可能希望使用.jpg扩展名保存文件，但并非所有浏览器都允许您指定文件名。我找到的最佳解决方案是在这个 SO thread 中。

So our script will check if the browser allows it will create a new anchorelement and set its downloadand click it(which will save the file in specified filename) else it will just download the file but the user will have to rename it with a .jpgextension to open it.

所以我们的脚本将检查浏览器是否允许它创建一个新anchor元素并设置它download并单击它（这会将文件保存在指定的文件名中）否则它只会下载文件但用户必须使用.jpg扩展名将其重命名为打开它。

Codepen Link

代码笔链接

 var camera, scene, renderer;
    var mesh;
    var strDownloadMime = "image/octet-stream";

    init();
    animate();

    function init() {

        var saveLink = document.createElement('div');
        saveLink.style.position = 'absolute';
        saveLink.style.top = '10px';
        saveLink.style.width = '100%';
        saveLink.style.background = '#FFFFFF';
        saveLink.style.textAlign = 'center';
        saveLink.innerHTML =
            '<a href="#" id="saveLink">Save Frame</a>';
        document.body.appendChild(saveLink);
        document.getElementById("saveLink").addEventListener('click', saveAsImage);
        renderer = new THREE.WebGLRenderer({
            preserveDrawingBuffer: true
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        //

        camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 400;

        scene = new THREE.Scene();

        var geometry = new THREE.BoxGeometry(200, 200, 200);



        var material = new THREE.MeshBasicMaterial({
            color: 0x00ff00
        });

        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        //

        window.addEventListener('resize', onWindowResize, false);

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

    }

    function animate() {

        requestAnimationFrame(animate);

        mesh.rotation.x += 0.005;
        mesh.rotation.y += 0.01;

        renderer.render(scene, camera);

    }

    function saveAsImage() {
        var imgData, imgNode;

        try {
            var strMime = "image/jpeg";
            imgData = renderer.domElement.toDataURL(strMime);

            saveFile(imgData.replace(strMime, strDownloadMime), "test.jpg");

        } catch (e) {
            console.log(e);
            return;
        }

    }

    var saveFile = function (strData, filename) {
        var link = document.createElement('a');
        if (typeof link.download === 'string') {
            document.body.appendChild(link); //Firefox requires the link to be in the body
            link.download = filename;
            link.href = strData;
            link.click();
            document.body.removeChild(link); //remove the link when done
        } else {
            location.replace(uri);
        }
    }

html, body {
    padding:0px;
    margin:0px;
}
canvas {
    width: 100%;
    height: 100%
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>