I am facing a problem that makes my brain bug…
I have an image to display in an HTML page, I plan to put a PHP script in the SRC of the IMG tag.
This PHP script renders a scene by reading a database, with DIV elements positioned on a rectangle including 3D transformations via CSS.
Still in the PHP script, I use dom-to-image, a JS library allowing to generate an image corresponding to a DOM node, I use it on my scene.
Here is my code for my main page:
<img src="genscene.php" alt="Scene" />
Here is my code in simplified form of the genscene.php:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/scene.css" />
</head>
<body>
<?php
// $scene variable contains html code generated by reading database
$scene = '<div id="scene"><div id="elt1"></div><div id="elt2"></div></div>';
echo $scene;
?>
<!-- javascript with dom-to-image -->
<script type="text/javascript">
domtoimage.toJpeg(document.getElementById('scene')).then(function(dataUrl) {
// Dunno what to do from here...
});
</script>
</body>
</html>
How to use the dataUrl retrieved from dom-to-image as the source of the image of the main page?
Maybe there is a shorter / simplier way to do what I want to do… but my brain’s dead for now D: