Javascript 渲染一个div并将其'；通过单击另一个div来创建交互式内容 点击

我有一个div（id=“1”class=“aaa”），其中包含多个交互式div。通过单击另一个div（id=“2”class=“bbb”），该交互式内容的状态应该能够呈现为图像（gif？）

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

p、 我知道像html2canvas和phantomjs这样的脚本，但我不知道如何在我的例子中实现它们

编辑：

现在我正在尝试实现，只需稍加调整，就可以与processing.js（）一起使用

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

<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>

$（'.bbb'）。单击（函数（e）{
var canvas=document.getElementById（“1”），
img=canvas.toDataURL（“image/png”）；
$（'.aaa'）.document.write（''）；
});

如果我在你的裤子里，我会先把第一个div切换到SVG符号。这并没有什么不同，有很多方法可以将svg对象导出到png

这应该让你开始

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

点击

您可以使用html2canvas进行此操作；在页面中包括html2canvas库，然后尝试以下操作：

<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>

然后，您需要将“url”的值发布到一个PHP脚本中，如下面的答案之一所示

编辑

新代码无法工作的原因是id为“1”的元素不是画布元素。它是一个div

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

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

---

_你到底想要什么？你的问题不清楚…：-（拍摄网页上特定区域的屏幕截图。我不认为这是我所需要的，因为我需要像小提琴一样的交互式div。此外，我有很多div和多个页面。我尝试组合一些东西（包括来自html2canvas.js的代码）没有成功。现在我正在尝试实现从您提供的链接中选择的解决方案-看起来很简单，看起来应该可以工作。我已经编辑了问题。好的，我已经更新了我的答案，并链接到一个提琴，以显示我的意思。谢谢。非常简单和有用。您的答案通常是正确的，但是，我不能“画图”画布内部的形状是这样的，因为我的内容不是静态的——我有很多复杂的div，上面有jquery和java，这似乎是造成问题的原因。对于像小提琴一样的基本静态内容，这很容易。我想改变代码结构——在这些矩形上应用函数——是可能的，但这会对我来说，这项工作太多，太高级了。这项功能很酷，但它不是必须的，所以我很可能会放弃它。谢谢你的帮助。

  //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");
    }
  });