Img tag with php script including JS code as src

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:

Edit:

With help of Petəíŕd message, I wrote my code differently : extracted the data from PHP, formated HTML in a PHP var, and transmitted this var to JS directly in the same source. I did no request (fetch) because I could simply read the database and store html render of the scene in a PHP variable before the HTML display.

My code looks like something like this now, in only 1 PHP file, and it works (I use Mootools for the JS part) :

<?php
// $scene variable contains html code generated by reading database
$scene = '<div id="scene"><div id="elt1"></div><div id="elt2"></div></div>';
?>

<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/scene.css" />
<script type="text/javascript">
window.addEvent('domready', function() { 
  // Must inject scene in body to make it work
  var scene = new Element('div', { id: 'scene' }).inject($(document.body)); 
  scene.set('html', '<?php echo $scene; ?>');
  domtoimage.toJpeg(scene).then(function(dataUrl) {
    $('imgscn').set('src', dataUrl);
    scene.dispose();
  });
});
</script>
</head>

<body>
  Here is the scene rendered into JPEG format :<br /><br />
  <img id="imgscn" alt="scene" />
</body>
</html>

Solution

You can simplify this:

const imgElement = document.querySelector("#scene-image");
fetch("genscene.php").then(result => result.text())
  .then(text => {
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = text;
    domtoimage.toJpeg(tempDiv).then(function(dataUrl) {
      // Do whatever you need with the data URL, for example:
      imgElement.setAttribute("src", dataUrl);
    });
  });

This works by fetching the HTML from genscene.php and then using domtoimage.

You should put the above in a <script> tag in your file where you include the image.

Remove the scripts from 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;
?>
</body>
</html>

If something goes wrong, you might need to move the CSS <link> to the page where you include the image.