# Save Screenshot on server

**URL:** <https://discourse.threejs.org/t/save-screenshot-on-server/39900>\
**Category:** Questions\
**Tags:** canvas\
**Created:** [July 2, 2022, 8:58am UTC](https://discourse.threejs.org/t/save-screenshot-on-server/39900 "2022-07-02T08:58:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![RRBiz](https://avatars.discourse-cdn.com/v4/letter/r/439d5e/32.png) [@RRBiz](https://discourse.threejs.org/u/RRBiz)\
**Post date:** [July 2, 2022, 8:58am UTC](https://discourse.threejs.org/t/save-screenshot-on-server/39900/1 "2022-07-02T08:58:10Z")

</div>

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;
	}

```

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 2, 2022, 9:31am UTC](https://discourse.threejs.org/t/save-screenshot-on-server/39900/2 "2022-07-02T09:31:50Z")

</div>

[screenshot.zip](https://discourse.threejs.org/uploads/short-url/fxOUtWOzxqmSVzdCrpVmF5pJQNT.zip) (3.8 KB)

---

<div class="post-metadata">

**Author:** ![RRBiz](https://avatars.discourse-cdn.com/v4/letter/r/439d5e/32.png) [@RRBiz](https://discourse.threejs.org/u/RRBiz)\
**Post date:** [July 2, 2022, 4:34pm UTC](https://discourse.threejs.org/t/save-screenshot-on-server/39900/3 "2022-07-02T16:34:00Z")

</div>

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); } ?\>

---

<div class="post-metadata">

**Author:** ![rrrr\_rrrr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rrrr_rrrr/32/7697_2.png) [@rrrr\_rrrr](https://discourse.threejs.org/u/rrrr_rrrr)\
**Post date:** [July 3, 2022, 5:06pm UTC](https://discourse.threejs.org/t/save-screenshot-on-server/39900/4 "2022-07-03T17:06:22Z")

</div>

> [@RRBiz](#):
>
> ```javascript
> 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;
> }
> 
> ```

Try this:

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

```