I followed this old post:
Three.js: How can I make a 2D SnapShot of a Scene as a JPG Image?
who explain how take a screenshot of the page, I followed instructions, the code seems OK but it doesn't work.
I'm using AR.JS to do augmented reality, and this runs normally too.
Tried the demo at codepen and it takes normally in my server. https://codepen.io/shivasaxena/pen/QEzAAv?editors=0010
My code:
<head>
<meta name="viewport" content="width=device-width, width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>TESTE 4</title>
<script src='js/three.js'></script>
<script src='js/OBJLoader.js'></script>
<script src='js/MTLLoader.js'></script>
<script src="jsartoolkit5/artoolkit.min.js"></script>
<script src="jsartoolkit5/artoolkit.api.js"></script>
<script src="threex/threex-artoolkitsource.js"></script>
<script src="threex/threex-artoolkitcontext.js"></script>
<script src="threex/threex-arbasecontrols.js"></script>
<script src="threex/threex-armarkercontrols.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
</head>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
<div id="capture" style='position: absolute; top: 10px; width:100%; z-index:1'>
<script>
var scene, camera, renderer, clock, deltaTime, totalTime;
var arToolkitSource, arToolkitContext;
var markerRoot1;
var mesh1;
var strDownloadMime = "image/octet-stream";
initialize();
animate();
function initialize()
{
scene = new THREE.Scene();
let ambientLight = new THREE.AmbientLight( 0xcccccc, 1.0 );
scene.add( ambientLight );
camera = new THREE.Camera();
scene.add(camera);
renderer = new THREE.WebGLRenderer({
preserveDrawingBuffer: true,
precision : "mediump",
antialias : true,
alpha: true
});
renderer.setClearColor(new THREE.Color('lightgrey'), 0)
renderer.setSize( 1920, 1080 );
renderer.domElement.style.position = 'absolute'
renderer.domElement.style.top = '0px'
renderer.domElement.style.left = '0px'
document.body.appendChild( renderer.domElement );
var saveLink = document.createElement('div');
saveLink.style.position = 'absolute';
saveLink.style.top = '10px';
saveLink.style.width = '100%';
saveLink.style.color = 'white !important';
saveLink.style.textAlign = 'center';
saveLink.innerHTML =
'<a href="#" id="saveLink">Save Frame</a>';
document.body.appendChild(saveLink);
document.getElementById("saveLink").addEventListener('click', saveAsImage);
clock = new THREE.Clock();
deltaTime = 0;
totalTime = 0;
arToolkitSource = new THREEx.ArToolkitSource({
sourceType : 'webcam',
});
function onResize()
{
arToolkitSource.onResize()
arToolkitSource.copySizeTo(renderer.domElement)
if ( arToolkitContext.arController !== null )
{
arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
}
}
arToolkitSource.init(function onReady(){
onResize()
});
window.addEventListener('resize', function(){
onResize()
});
arToolkitContext = new THREEx.ArToolkitContext({
cameraParametersUrl: 'data/camera_para.dat',
detectionMode: 'mono'
});
arToolkitContext.init( function onCompleted(){
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
});
markerRoot1 = new THREE.Group();
scene.add(markerRoot1);
let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
type: 'pattern', patternUrl: "data/boxa.patt",
})
function onProgress(xhr) { console.log( (xhr.loaded / xhr.total * 100) + '% loaded' ); }
function onError(xhr) { console.log( 'An error happened' ); }
new THREE.MTLLoader()
.setPath( 'models/' )
.load( 'space.mtl', function ( materials ) {
materials.preload();
new THREE.OBJLoader()
.setMaterials( materials )
.setPath( 'models/' )
.load( 'space.obj', function ( group ) {
mesh0 = group.children[0];
// mesh0.material.side = THREE.DoubleSide;
// mesh0.position.y = 0.21;
mesh0.scale.set(0.25,0.25,0.25);
markerRoot1.add(mesh0);
}, onProgress, onError );
});
}
var posi;
posi = 1;
function update()
{
if (posi == 1 && mesh0.position.y <= 1.30)
mesh0.position.y += 0.01;
if (mesh0.position.y > 1.30 )
posi = 2;
if (posi == 2 )
mesh0.position.y -= 0.01;
if (mesh0.position.y <= 0.00 )
posi = 1;
if ( arToolkitSource.ready !== false )
arToolkitContext.update( arToolkitSource.domElement );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function render()
{
renderer.render( scene, camera );
}
function animate()
{
requestAnimationFrame(animate);
deltaTime = clock.getDelta();
totalTime += deltaTime;
update();
render();
}
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>
</div>
</body>
</html> ```
