如何将dom-to-image生成的dataUrl作为主页面IMG标签的图片源？

我遇到个问题：想在HTML页面显示图片，原本打算把PHP脚本设为IMG标签的SRC属性。这个PHP脚本会读取数据库渲染包含CSS 3D变换定位DIV元素的场景，再用dom-to-image库把DOM节点转成图片，但不知道怎么把获取到的dataUrl作为主页面IMG标签的图片源。

最初的代码 #

主页面代码 #

<img src="genscene.php" alt="Scene" />

genscene.php简化代码 #

<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/scene.css" />
</head>
<body>

<?php
// $scene变量包含从数据库读取后生成的HTML代码
$scene = '<div id="scene"><div id="elt1"></div><div id="elt2"></div></div>';
echo $scene;
?>

<!-- 引入dom-to-image的JavaScript代码 -->
<script type="text/javascript">
  domtoimage.toJpeg(document.getElementById('scene')).then(function(dataUrl) {
    // 不知道从这里该怎么做...
  });
</script>
</body>
</html>

当时完全没头绪，不知道有没有更简便的实现方式。

解决后的代码 #

在帮助下调整了代码逻辑：直接在同一个PHP文件中从数据库提取数据生成HTML场景的PHP变量，传递给JS（使用Mootools），不需要额外请求，最终实现了功能。调整后的代码如下：

<?php
// $scene变量包含从数据库读取后生成的HTML代码
$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() { 
  // 必须把场景注入到body中才能生效
  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>
  这是渲染成JPEG格式的场景：<br /><br />
  <img id="imgscn" alt="scene" />
</body>
</html>

内容的提问来源于stack exchange，提问作者Mike G.