Question

<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（id =“1”class =“aaa”），它包含多个交互式div。这个交互式内容的状态应该能够通过点击另一个div（id =“2”class =“bbb”）呈现为图像（gif？）。

最好在新标签页或窗口中打开该图像。或者只是右键单击＆gt;保存到位。

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

修改

现在我正在尝试实现this solution，稍加调整就可以使用processing.js（http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js）。

我想我只需要使用正确的jquery代码和processing.js来实现我需要的功能。我试过这个并不起作用：

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

Answer 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脚本，例如this question的答案之一。

修改

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

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

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

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

_Pez

Answer 2

如果我穿着你的裤子，我首先将第一个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>

通过单击另一个div来渲染一个div和它的交互式内容

2 个答案: