Как работает JQuery .clone() под капотом?

Question

sazhyk @sazhyk

Как работает JQuery .clone() под капотом?

Необходимо сохранить страницу html как изображение. Страница изначально не статичная. Её содержимое генерируется. Цель - сделать скриншот страницы с превью изображений. Все примеры взял из сети.

Кусок страницы

<input type="button" id="btn_convert" value="Screenshot">
        <input type="file" id="addImages" multiple="">
        <ul id="uploadImagesList">
            <li class="item template">
                <span class="img-wrap">
                    <img src="" alt="">
                </span>
                <span class="delete-link" title="Удалить">Удалить</span>
            </li>
        </ul>
        <div class="clear"></div>
        <div id="previewImg">
            <p>Preview</p>
        </div>

Скрипт , который генерирует превью для файлов

jQuery(document).ready(function ($) {

    var maxFileSize = 8 * 1024 * 1024; // (байт) Максимальный размер файла (8мб)
    var queue = {};
    var imagesList = $('#uploadImagesList');

    var itemPreviewTemplate = imagesList.find('.item.template').clone(true);
    itemPreviewTemplate.removeClass('template');
    imagesList.find('.item.template').remove();
    $('#addImages').on('change', function () {
        var files = this.files;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            if ( !file.type.match(/image\/(jpeg|jpg|png|gif)/) ) {
                alert( 'Фотография должна быть в формате jpg, png или gif' );
                continue;
            }
            if ( file.size > maxFileSize ) {
                alert( 'Размер фотографии не должен превышать 8 Мб' );
                continue;
            }
            preview(files[i]);
        }
        this.value = '';
    });

    // Создание превью
    function preview(file) {
        var reader = new FileReader();
        reader.addEventListener('load', function(event) {
            var img = document.createElement('img');
            var itemPreview = itemPreviewTemplate.clone(true);
            itemPreview.find('.img-wrap img').attr('src', event.target.result);
            itemPreview.data('id', file.name);
            imagesList.append(itemPreview);
            queue[file.name] = file;
        });
        reader.readAsDataURL(file);
    }

    // Удаление фотографий
    imagesList.on('click', '.delete-link', function () {
        var item = $(this).closest('.item'),
            id = item.data('id');
        delete queue[id];
        item.remove();
    });

});

После этого, мне надо сохранить страницу как изображение. Перед этим скрин вставляется в блок для проверки на странице. Потом загружается. Для этого использую html2canvas.

Скниншот

document.getElementById("btn_convert").addEventListener("click", function() {
html2canvas(document.getElementById("uploadImagesList"),
    {
        allowTaint: true,
        useCORS: true
    }).then(function (canvas) {
        var anchorTag = document.createElement("a");
        document.body.appendChild(anchorTag);
        document.getElementById("previewImg").appendChild(canvas);
        anchorTag.download = "filename.jpg";
        anchorTag.href = canvas.toDataURL();
        anchorTag.target = '_blank';
        anchorTag.click();
    });
});

Собственно проблема в том, что превью делается, а canvas потом на странице пустой.

Вот что получается

<div id="previewImg">
    <p>Preview</p>
    <canvas width="976" height="0"></canvas>
</div>

Я не силен в JS. Вот у меня закралось подозрение, что я не совсем понимаю, как правильно под капотом работает .clone() из JQuery. Мне показалось, что нельзя добавить в канвас элементы, созданные динамически. Может кто-то объяснить, что я делаю не так?