Html2canvas вне экрана

При использовании html2canvas у меня есть объект stack объектов DOM (относительный позиционированный div, который содержит разные вещи), для которого я хочу создать отдельные миниатюры. Итак, если есть десять div, я создам десять эскизов.

Некоторые из этих объектов будут вне экрана - каждый из этих divs находится в одном, охватывающем div, называемом "mainDiv". Я перебираю divs внутри mainDiv и выполняю html2canvas по каждому из них по отдельности.

Для тех, кто на экране, это работает отлично. Те, что вне экрана, не делают - они возвращаются в прошлое. Я создал обходной путь, который прокручивает объекты до вершины mainDiv, однако это kludge и визуально непривлекательный.

Можно ли указать объект DOM, который не отображается? В идеале, я хотел бы иметь возможность указывать содержащий div и иметь html2canvas игнорировать родительскую видимость, поэтому я могу отображать скрытые объекты, но, запрещая это, я хотел бы иметь возможность отображать объекты захвата, которые просто прокручивается экран.

Любые мысли, идеи? Спасибо!

---- Вот пример кода. В принципе, если у вас есть куча div в div, проведите через них. Я на самом деле делаю это recursively, так что только один обрабатывается за раз с обратным вызовом, вызывающим рекурсивную функцию, поэтому он выглядит примерно так:

  function recurser(anIndex, callback) {
    if (anIndex == -1) {
        callback();
        return;
    }
    $(myDivs[anIndex]).html2canvas({
        onrendered : function(canvas) {
            var img = canvas.toDataURL();
            // store the image in an array, do stuff with it, etc.
            recurser(--anIndex, callback);

        }
    })

}

Как только рекурсивные вызовы завершены, он выполняет функцию обратного вызова, которая является функцией, которая будет обрабатывать изображения.

Опять же, все это прекрасно работает, пока объекты видны внутри прокручиваемого div, который содержит все div в #mainDiv. Однако, если какая-либо часть divs прокручивается, они отображают черный цвет. Фактически, если половина из двух divs прокручивается (верхняя половина одной, нижняя половина следующего), они оба выглядят полностью черными.

Ответ 1

Я знаю, что это старый вопрос, но это казалось интересным. Основываясь на моем тестировании, казалось, что это вызвало только те элементы position: absolute и position:fixed, которые были вне области просмотра. Я понял решение проблемы.

То, что я делаю, - это сделать клон элемента. Установка стиля клонирования на left = 0, top = window.innerHeight (так, чтобы он не находился внутри окна) и position = 'relative'. Затем я добавляю клон в тело, использую html2canvas на клоне, а затем удаляю клон из тела. Это решение работает для меня в IE, Firefox и Chrome.

Я создал здесь JSBin пример. Вот ключевой код javascript:

function hiddenClone(element){
  // Create clone of element
  var clone = element.cloneNode(true);

  // Position element relatively within the 
  // body but still out of the viewport
  var style = clone.style;
  style.position = 'relative';
  style.top = window.innerHeight + 'px';
  style.left = 0;

  // Append clone to body and return the clone
  document.body.appendChild(clone);
  return clone;
}

var offScreen = document.querySelector('.off-screen');

// Clone off-screen element
var clone = hiddenClone(offScreen);

// Use clone with htm2canvas and delete clone
html2canvas(clone, {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
      document.body.removeChild(clone);
    }
});

Ответ 2

установите "переполнение" как видимое для всех его родительских элементов. После рендеринга удалите его

CSS

.overflowVisible{
    overflow:visible !important;
}

JS

$("#container").parents().each(function(ind,elem){
    $(elem).addClass("overflowVisible");
});

html2canvas($("#container"), {
    onrendered: function(canvas) {
        var img =canvas.toDataURL("image/png");
        $('body').append(img);
        $("#container").parents().each(function(ind,elem){
            $(elem).removeClass("overflowVisible");
        });
    }
});

Ответ 3

А теперь попробуйте Div display: none; и Div display: absolute; (или как вы хотите, чтобы ваш div появился - возможно, z-index)

    arrow1.onclick = (event){
arrow1.style.display = none;
arrow2.style.display = absolute;
}

    arrow2.onclick = (event){
arrow2.style.display = none;
arrow1.style.display = absolute;
}