0

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

dsdsdsdsd
  • 2,880
  • 6
  • 41
  • 56

1 Answers1

0

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.

Community
  • 1
  • 1
phenxd
  • 689
  • 4
  • 17
  • the html2canvasis taking dom elements and rendering them on a canvas ... BUT the three.js is _already_ on a canvas ... so, yes, there is no need for html2canvas ... thanks ... – dsdsdsdsd Feb 04 '16 at 16:50