0 
<div id="1" class="aaa" style="position: relative; left: 50px; top: 50px; width: 300px; height: 200px; border: solid 1px; background: #dddddd; overflow: hidden;">
    <div style="position: relative; left: 30px; top: 25px; width: 100px; height: 50px; background: blue;" onmouseenter="this.style.background='red';"></div>
    <div style="position: relative; left: 160px; top: 70px; width: 100px; height: 50px; background: blue;" onmouseenter="this.style.background='orange';"></div>
</div>
<div id="2" class="bbb" style="position: relative; left: 250px; top: 100px; width: 50px; height: 20px; border: solid 1px; background: #cccccc; text-align: center; overflow: hidden;">click</div>

http://jsfiddle.net/FWyBQ/

我有一个包含多个交互式 div 的 div (id="1" class="aaa")。此交互式内容的状态应该能够通过单击另一个 div (id="2" class="bbb") 呈现为图像 (gif?)。

该图像最好在新选项卡或窗口中打开。或者也许只是右键单击>另存为。

ps 我知道像 html2canvas 和 phantomjs 这样的脚本，但我不知道如何在我的情况下实现它们。

编辑：

现在我正在尝试实现这个解决方案，稍微调整一下应该可以与 processing.js 一起使用（http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.min。 js）。

我想我只需要带有 processing.js 的正确 jquery 代码来实现我需要的功能。我已经尝试过了，但它不起作用：

$('.bbb').click(function (e) {
        var canvas = document.getElementById("1"),
            img    = canvas.toDataURL("image/png");
        $('.aaa').document.write('<img src="'+img+'"/>');
    });
4

2 回答 2

1

您可以为此使用 html2canvas；在您的页面中包含 html2canvas 库并尝试以下操作：

  //element would be your aaa div
  html2canvas(element, {
    onrendered: function(canvas) {
        // canvas is the resulting canvas generated from the element
        var url = canvas.toDataURL("image/png");
    }
  });

然后，您需要将 'url' 的值发布到 PHP 脚本中，就像这个问题的答案之一一样。

编辑

您的新代码不起作用的原因是 id 为“1”的元素不是画布元素。它是一个div。

像 toDataUrl() 这样的 Canvas 方法只能在 Canvas 元素上调用（这就是我建议使用 html2canvas 将您的 div 更改为 Canvas 的原因。）

如果 id 为“1”的元素是画布，我已经分叉了你的 jsfiddle 来展示代码如何工作：

http://jsfiddle.net/_Pez/cksGt/1/

_佩斯

于 2013-09-22T22:30:30.760 回答
0

如果我在你的裤子里，我会先将第一个 div 切换为 SVG 表示法。它并没有那么不同，并且有很多方法可以将 svg 对象导出为 png。

这应该让你开始

<svg id="1" class="aaa" width="400" height="250">
     <g>
        <rect id="svg_0" height="200" width="300" y="50" x="50" stroke-width="1" stroke="#000000" fill="#dddddd"/>
        <rect id="svg_1" height="50" width="100" y="75" x="80" stroke-width="5" fill="blue"/>
        <rect id="svg_2" height="50" width="100" y="120" x="210" stroke-width="5"  fill="blue"/>
    </g>
</svg>

<div id="2" class="bbb" style="position: relative; left: 250px; top: 100px; width: 50px; height: 20px; border: solid 1px; background: #cccccc; text-align: center; overflow: hidden;">click</div>
于 2013-09-22T20:12:04.507 回答