divと基になるコンテンツを画像にコピー

Question

顔認識では、私はtrackingjsを使って、顔の位置の場所に画像上にdivを描画します。

javascript/jqueryを使用してdivとその基礎HTML要素（特に画像）の内容（base64）を保存したいとします。

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