Img tag with php script including JS code as src

Question

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>

"Still in the PHP script, I use dom-to-image" - what does that mean? How do you use a JS library in PHP? — Nico Haase
– Nico Haase, Commented Nov 29, 2024 at 18:49
@NicoHaase a php file can contain html, css and various scripts, as the php can "echo" whatever the dev want — Mike G.
– Mike G., Commented Nov 30, 2024 at 8:42
@James Thank you but I already have the image generation part with dom-to-image and it works well, moreover my html is very complex with many css transformations and absolute positioning, I tried different solutions before that one without success. — Mike G.
– Mike G., Commented Nov 30, 2024 at 8:46
@Nico I agree, I was talking about using the JS script in the PHP file "genscene.php", inside the code, with the echo command, but it's certainly my english which is very imperfect, forgive me ;) — Mike G.
– Mike G., Commented Dec 2, 2024 at 14:11

Petəíŕd the Wizard · Accepted Answer · 2024-11-29 18:15:55Z

4

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.

answered Nov 29, 2024 at 18:15

Petəíŕd the Wizard

3812 gold badges6 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mike G. Nov 30, 2024 at 8:53

You're surely right, I will try in this way. I also got some css rules that come to database (perspective, transforms, backgrounds and colors) but I can put it directly into my elements style attributes if these css rules make some problem... I will try this on monday (resting this week-end), like you said in your message requesting html code from php then using domtoimage in the main page should be the most logical thing to do, I will come back to post the result next week.

Mike G. Dec 2, 2024 at 14:15

I solved my problem with a solution near this one, the only problem I encountered is that the "tempDiv" must be in the document DOM to be used with domtoimage with success. Thank you for your help

Collectives™ on Stack Overflow

Img tag with php script including JS code as src

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related