Question

在这里，从saveAsImage（）方法捕获图像之后，我想将其传递给img src标记并显示它。在这里，saveAsImage（）函数用于捕获对象，而saveFile（）用于下载JPG格式的图像。在这里，我正在寻找捕获图像后将其保存在img src标签中的图像。预先感谢

<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>

<body>
    <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>
    <script type="text/javascript">
        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 =
                '<button href="#" id="saveLink">Save Frame</button>';
            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);
            }
        }
    </script>
    <style type="text/css">
        html,
        body {
            padding: 0px;
            margin: 0px;
        }

        canvas {
            width: 100%;
            height: 100%
        }
    </style>
</body>

</html>

Answer 1

您可以将renderer.domElement.toDataURL()返回的内容直接赋予图像src属性。
例如。
document.getElementById('myImage').src = renderer.domElement.toDataURL();

点击下面的“运行代码段”以查看其运行情况。

var camera, scene, renderer, mesh, material;
init();
animate();

function init() {
    // Renderer.
    renderer = new THREE.WebGLRenderer();
    //renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Add renderer to page
    document.body.appendChild(renderer.domElement);

    // Create camera.
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 400;

    // Create scene.
    scene = new THREE.Scene();

    // Create material
    material = new THREE.MeshPhongMaterial();

    // Create cube and add to scene.
    var geometry = new THREE.BoxGeometry(200, 200, 200);
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // Create ambient light and add to scene.
    var light = new THREE.AmbientLight(0x404040); // soft white light
    scene.add(light);

    // Create directional light and add to scene.
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // Add listener for window resize.
    window.addEventListener('resize', onWindowResize, false);
    
    // Add listener for button click.
   document.getElementById('clickButton').addEventListener('click', buttonClick);

}

function animate() {
    requestAnimationFrame(animate);
    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);
}

function buttonClick() {
  renderer.render(scene, camera);
  document.getElementById('image').src = renderer.domElement.toDataURL();
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

body {
  padding: 0;
  margin: 0;
  position: relative;
  height: 100%;
}
canvas {
  display: block;
  position: absolute;
  top:0px;
  left: 0px;
  z-index: 1;
}
#clickButton {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  cursor: pointer;
}
#image {
  position: absolute;
  top: 10px;
  right: 10px;
  max-width: 150px;
  width: 150px;
  height: 90px;
  z-index: 3;
  border: 1px solid #fff;
}

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

<button id="clickButton">click</button>
<img id="image" src="https://i.stack.imgur.com/Ff4qt.jpg"/>

在三个js中捕获后将图像传递给img src

1 个答案: