Save Screenshot on server

I have found this to make a screenshot. It works fine - opens a new Tab - and on click you can download the screenshot.
But I need the screenshot in a folder on my server - that I can work with it with php image commands
How should I do that?

	function takeScreenshot() {

		// open in new window like this
		//
		var w = window.open('', '');
		w.document.title = "Screenshot";
		//w.document.body.style.backgroundColor = "red";
		var img = new Image();
		// Without 'preserveDrawingBuffer' set to true, we must render now
		renderer.render(scene, camera);
		renderer.clearDepth();
		renderer.render(sceneOrtho, cameraOrtho);

		img.src = renderer.domElement.toDataURL();
		w.document.body.appendChild(img);
		isUserInteracting = false;
	}
1 Like

screenshot.zip (3.8 KB)

1 Like

Thank you very much Chaser_Code

This did not work for me - but it gave me the decisive information I needed
Did not expect that img.src.toString() would work but surprise - it worked

	function takeScreenshot() {
		var w = window.open('', '');
		w.document.title = "Screenshot";
		var img = new Image();
		renderer.render(scene, camera);
		renderer.clearDepth();
		renderer.render(sceneOrtho, cameraOrtho);

		img.src = renderer.domElement.toDataURL();
		w.document.body.appendChild(img);
		let dum = img.src.toString();
		let data = new FormData();
		data.append("screenshot_data",  dum);
		let xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new activeXObject("Microsoft.XMLHTTP");
		xhr.open('POST', 'screenshot_create.php', true);
		xhr.send(data);

		isUserInteracting = false;
	}

screenshot_create.php

<?php if(!file_exists('Screenshots')) mkdir('Screenshots'); if(isset($_POST['screenshot_data'])) { $screenshot_data=$_POST["screenshot_data"]; $screenshot_data=str_replace('data:image/png;base64,','',$screenshot_data); $screenshot_data=str_replace(' ','+',$screenshot_data); $screenshot_data=base64_decode($screenshot_data); $p=imagecreatefromstring($screenshot_data); header('Content-Type: image/png'); imagepng($p, 'Screenshots/'.date('Y-m-d_H-i-s', time()).'.png'); imagedestroy($p); } ?>
1 Like

Try this:

function takeScreenshot() {
var xhr = new XMLHttpRequest();
renderer.render(scene, camera);
xhr.open("POST", "upload_img.cgi", !1 );
xhr.send( canvas.toDataUrl());
}