时间戳

首页 > 解决方案 > THREE.js CSS2DRenderer - 如何将普通和 CSS2D 图像保存为单个 .jpg 文件？

javascript - THREE.js CSS2DRenderer - 如何将普通和 CSS2D 图像保存为单个 .jpg 文件？

问题描述

使用下面列出的代码...

(1) 我已经能够将普通渲染的THREE.js场景保存为.jpg文件；

(2) 我还能够使用CSS2DRenderer“渲染”CSS2D 标签在画布顶部（而不是“到”）；

(3) 接下来我想将CSS2DRenderer-rendered 叠加图像保存为第二个.jpg文件；

但我得到了错误：- TypeError: labelRenderer.domElement.toDataURL is not a function。

我在想也许不可能从 CSS2D 导出？

(4) 理想情况下，我想将组合的（普通和 CSS2D 叠加）屏幕图像保存为单个.jpg文件。

代码：-

// GLOBALS

// INITIATION

    var MyContainer = document.getElementById( "for_3JS" );
    MyContainer.innerHTML = "";

    renderer = new THREE.WebGLRenderer( {antialias:true , preserveDrawingBuffer: true} );   
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( wwww, hhhh );

    MyContainer.appendChild( renderer.domElement ); 

    var labelRenderer = new CSS2DRenderer();
    labelRenderer.setSize( wwww, hhhh );     
    labelRenderer.domElement.style.position = 'absolute';
    labelRenderer.domElement.style.top = 0;
    
    MyContainer.appendChild( labelRenderer.domElement ); 

// ANIMATION & RENDERING

    renderer.render     ( scene, camera );
    labelRenderer.render( scene, camera );

// ONCLICK
            
    var strMime = "image/jpg";
    
    //... THIS WORKS OK (but NO LABELS):- 
    var imgDataA = renderer.domElement.toDataURL( strMime );            
    
    //... THIS FAILS  with:- TypeError: labelRenderer.domElement.toDataURL is not a function.           
    var imgDataB = labelRenderer.domElement.toDataURL( strMime );   
    
    //... save as file (imgDataA only at present).
    var fileURL = imgDataA;//imgDataB
            //...from http://muaz-khan.blogspot.co.uk/2012/10/save-files-on-disk-using-javascript-or.html
    var Fsave = document.createElement('a'); //... creates an html <a> anchor object.                       
            
    document.body.appendChild( Fsave ); //... for Firefox, not needed in Opera (?)
    Fsave.style     = "display: none";
    Fsave.href      = fileURL;
    Fsave.target    = '_blank';
    Fsave.download  = filename || 'unknown';
    Fsave.click();
    document.body.removeChild( Fsave );

标签： javascriptcssthree.js

解决方案

(2) 我还能够使用 CSS2DRenderer 将 CSS2D 标签渲染到画布上；

恐怕这个公式是不正确的，因为你在使用CSS2DRendereror时没有渲染“到画布上” CSS3DRenderer。实际上，您将 HTML 元素放在画布上，并为它们分配相应的 2D 或 3D 转换。

因此，无法将ANDtoDataURL()的输出保存到图像中。WebGLRendererCSS2DRenderer

我已经在调试器中检查了 .domElement，但即使对于 renderer.domElement 也看不到 toDataURL。

该方法在使用时肯定存在WebGLRenderer，参见https://jsfiddle.net/dxmrvzw6/。

推荐阅读