html2canvas offscreen

Question

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

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

Answer 1

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

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

Я создал JSBin example here. Вот ключевой код 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); 
    } 
}); 

Answer 2

А теперь вы попробовали Div display: none; и Div display: absolute; (Или как вы хотите, чтобы ваше ДИВ появиться - возможно, г-индекс)

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

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

Answer 3

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

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"); 
     }); 
    } 
});