[SOLVED] Need to save image-data to server

[Thomas_Due_Nielsen]

Hello, I need to sevrerside-save the ‘damaged data’ from https://developer.playcanvas.com/en/tutorials/character-damage-demo/

• either as the dynamic rendertexture on the black plane (saved as png/jpg-image by a mousebutton-click), or by saving a screenshot (much like https://playcanvas.com/editor/scene/476102) but with the option of opening a PHP-side instead of a ‘blank’. From there I should be able to save like this: http://adnan-tech.com/save-div-as-image-html2canvas/
• but so far this has failed, as the PC-applet does not seem to be able to transfer the ‘.container’-div correctly.

Would prefer the first option, as I could bypass any cropping of div of fullscreen.

[Leonidas]

Hi @Thomas_Due_Nielsen,

What do you mean transfer the .container div to the server? Not sure how you can transfer a browser rendered element to the server.

To save the image-data there to a server you will have to communicate somehow from your JS to the server, usually that is done using AJAX. This isn’t mostly related to Playcanvas and you will have to prepare your PHP server to receive the call as we;;.

A google search reveals a lot of related results:

https://www.google.com/search?source=hp&ei=U2MxX_utNIW-a-nBhtAB&q=javascript+save+image+to+php+server&oq=javascript+save+image+to+php+server

[Thomas_Due_Nielsen]

Ok will have to write the code then ( I have an example that is purely based on an applet-free HTML-form structure). In that an #/id-element (Div-placed image) is submitted flawless to a save.php receiverpage. Our PC-classic ./container within the exported applet will not submit the imagedata in the same way (at least in my first 3-5 different tries or so) will elaborate with the written code in some hours

[Thomas_Due_Nielsen]

(continued with code … ‘after some hours’)

minor tech-disclaimer ->> php ahead: Yes, as you mentioned @Leonidas either AJAX or in this case PHP will have to be used.
This is/was actually where I started: https://github.com/niklasvh/html2canvas

• and within it one will find two pages in the form-structure I cf’ed earlier/above. Here is a shortened version of the original github-example - a Div referenced by ‘target’:

<div id="target">
				<table cellpadding="10">
					
						<td colspan="2">
                            This is sample implementation
                        </td>

				</table>
			</div>

• below that a encapsulated js-function calls the ‘target’-div (area to be screen-shot sort of say).

<script type="text/javascript">
	function capture() {
		$('#target').html2canvas({
			onrendered: function (canvas) {
                //Set hidden field's value to image data (base-64 string)
				$('#img_val').val(canvas.toDataURL("image/png"));
                //Submit the form manually
				document.getElementById("myForm").submit();
			}
		});
	}
</script>

Going back to the top the form-structure (still in first index.php) that uses this to send/submit/(transfer image data):

<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
	<input type="hidden" name="img_val" id="img_val" value="" />
</form>

Finally the save.php, in the receiving end, treats the data (from the POST):

<?php
//Get the base-64 string from data
$filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);

//Decode the string
$unencodedData=base64_decode($filteredData);

//Save the image
file_put_contents('img.png', $unencodedData);
?>

So this is actually where my real trouble starts:

1. With a premise of altering the <div id="target"> to become the/(our) classic full in-applet ‘
   ’ (?), I wish to …
2. take a screenshot of all within the PlayCanvas rect (in this case both background, robot and black damage-UVmap-plane)
3. for finally using the PHP-saved image, to crop out the black plane.
4. As such ‘the damage’ can be saved and fetched afterwards/at different session etc (I am not pursuing a game, but this workthrough could actually be worthful for many game-devs in here regardless )

Actual problem
A) Converting ‘target+img_val’ to ‘container+container’ like:

$('#target').html2canvas({
			onrendered: function (canvas) {
                //Set hidden field's value to image data (base-64 string)
				$('#img_val').val(canvas.toDataURL("image/png"));
                //Submit the form manually
				document.getElementById("myForm").submit();
			}
		});

• into:

Mouse.prototype.capture = function () {
		$('.container').html2canvas({
			onrendered: function (canvas) {
                //Set hidden field's value to image data (base-64 string)
				$('.container').val(canvas.toDataURL("image/png"));
                //Submit the form manually
				document.getElementById("myForm").submit();
			}
		});
	
};

• does not seem to help me at all. Both ‘body’ and ‘.container’ within the css:

B)

body {
    font-family: Helvetica, arial, sans-serif;
}

.container {
    color: #ecf0f1;
    display: inline-block;
    position: fixed;
    bottom: 20px;
    left: 20px;
}

• does not seem to represent the actual 3D-content of the applet anyway (?)

What to do to ‘transfer’ the image-data from the rendering of the PlayCanvas-content behind HTML-layer (now body, container, buttons etc.) to a virtual placeholder, that can then be send/submitted to the save.php?