javascript - 将 div 和底层内容复制到图像

Question

对于面部识别，我使用 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 完成吗？

Answer 1

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

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