Search code examples
javascript3dhtml2canvas

Can html2canvas capture a javascript 3d 'screenshot'?


I have seen an example of html2canvas create a 'screenshot' of an html block (ex: html2canvas example).

What I would like to do is, using javascript, capture a 'screenshot' of a three.js (or any js 3d library) scene.

Keep in mind that the user might play with (rotate, etc) the 3d scene before deciding to 'screenshot' it.

Can html2canvas 'capture' a 3d scene?

EDIT see plunker for codesee plunker for working solution


Solution

  • Well, since three.js draws a canvas, I'm pretty sure you'd be able to replicate it's current state without the use of html2canvas.

    function cloneCanvas(oldCanvas) {
        //create a new canvas
        var newCanvas = document.createElement('canvas');
        var context = newCanvas.getContext('2d');
    
        //set dimensions
        newCanvas.width = oldCanvas.width;
        newCanvas.height = oldCanvas.height;
    
        //apply the old canvas to the new one
        context.drawImage(oldCanvas, 0, 0);
    
        //return the new canvas
        return newCanvas;
    }
    

    Thanks to Robert Hurst for his answer on the subject

    Regarding html2canvas, this paragraph of the doc leads me to believe that it will be able to copy the canva since it is not tainted with cross-origin content.

    Limitations
    All the images that the script uses need to reside under the same origin for it to be able to read them without the assistance of a proxy. Similarly, if you have other canvas elements on the page, which have been tainted with cross-origin content, they will become dirty and no longer readable by html2canvas.