html2canvas offscreen

Question

Nell'utilizzo di html2canvas, ho uno stack di oggetti DOM (relativi posizionati div che contengono varie cose), che desidero creare miniature individuali per. Quindi se ci sono dieci div, creerò dieci miniature.

Alcuni di questi oggetti saranno offscreen - tutti questi div sono in un unico div inglobatore chiamato "mainDiv". I iterare attraverso i div all'interno di mainDiv ed eseguire html2canvas su ognuno di essi individualmente.

Per quelli che sono sullo schermo, questo funziona correttamente. Quelli che sono fuori dallo schermo no - tornano in bianco. Ho creato una soluzione alternativa per far scorrere gli oggetti nella parte superiore dello mainDiv, tuttavia si tratta di un kludge e visivamente poco attraente.

È possibile specificare un oggetto DOM che non è visibile? Idealmente, mi piacerebbe essere in grado di specificare un div contenente e avere html2canvas ignorare la visibilità genitore, così posso screenare gli oggetti nascosti, ma a meno che, mi piacerebbe essere in grado di schermare gli oggetti di acquisizione che vengono semplicemente scrollati schermo.

Qualche idea, idea? Grazie!

---- Ecco alcuni esempi di codice. Fondamentalmente, se tu avessi un gruppo di div all'interno di un div, iterate attraverso di loro. Io in realtà fare questo recursively in modo che solo uno viene elaborato alla volta, con la richiamata chiamando la funzione ricorsiva, così sembra qualcosa di simile:

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

     } 
    }) 

} 

Una volta che le chiamate ricorsive sono completi, si esegue la funzione di callback, che è una funzione che farà cose con le immagini.

Ancora una volta, tutto questo funziona bene finché gli oggetti sono visibili all'interno del div di scorrimento che contiene tutti i div in #mainDiv. Una volta che una qualsiasi parte dei div è stata disattivata, tuttavia, diventano di colore nero. Infatti, se si esegue lo scrolling di metà di due div (la metà superiore di uno, la metà inferiore del successivo), entrambi risultano completamente neri.

Answer 1

So che questa è una domanda vecchia ma mi è sembrata interessante. Sulla base dei miei test sembrava che solo gli elementi position: absolute e position:fixed che si trovavano al di fuori del viewport abbiano causato questo problema. Ho trovato una soluzione al problema.

Quello che sto facendo è fare un clone dell'elemento. Impostazione dello stile del clone su left = 0, top = window.innerHeight (in modo che non sia all'interno della finestra) e position = 'relative'. Quindi aggiungo il clone al corpo, uso html2canvas sul clone e quindi rimuovo il clone dal corpo. Questa soluzione funziona per me in IE, Firefox e Chrome.

Ho creato un JSBin example here. Ecco la chiave codice 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

Ah ora avete provato Div schermo: nessuno; e Div Display: assoluto; (O come vuoi il tuo div appaia - forse z-index)

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

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

Answer 3

set 'troppo pieno', come visibile per tutti i suoi elementi padre.Dopo reso rimuoverlo

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