将 div 和底层内容复制到图像答案

【问题标题】：Copy div and underlying content to image将 div 和底层内容复制到图像
【发布时间】：2017-07-02 01:09:50
【问题描述】：

对于面部识别，我使用 trackingjs 在面部位置处的图像上绘制一个 div。

我想使用 javascript / jquery 存储 div 的内容 (base64) 及其底层 html 元素（尤其是图像）。

<div class="demo-frame">
    <div class="demo-container">
        <img id="picture" src="http://domain/assets/example/img/example_photo.jpg">
        <div id="crop-image" class="rect" style="width: 107px; height: 107px; left: 704px; top: 135px;"></div>
    </div>
</div>

这可以通过 jquery / javascript 来完成吗？

【问题讨论】：

您可以在画布上绘制图像并在图像顶部绘制与div 相同大小和位置的矩形，然后使用toDataURL() 获得base64 表示该图像画布。

标签： javascript jquery html css

【解决方案1】：

如果您需要将内容复制到页面的另一部分，您可以使用 JQuery 中的clone 函数。

  $(function(){
    var $copy = $('.demo-frame').clone();
    $('#copyto').html($copy);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="demo-frame">
    <div class="demo-container">
        <img id="picture" src="http://domain/assets/example/img/example_photo.jpg">
        <div id="crop-image" class="rect" style="width: 107px; height: 107px; left: 704px; top: 135px;"></div>
    </div>
</div>
<div id="copyto"></div>

【讨论】：