javascript - tag - html2canvas fuera de pantalla

title html attribute

Question

Al usar html2canvas, tengo una stack de objetos DOM (div posicionados relativos que contienen varias cosas), para los cuales deseo crear miniaturas individuales. Así que si hay diez divs, crearé diez miniaturas.

Algunos de estos objetos estarán fuera de la pantalla: cada uno de estos divs se encuentra en un solo div, que abarca "mainDiv". Repito los divs dentro de mainDiv y ejecuto html2canvas en cada uno de ellos individualmente.

Para aquellos que están en pantalla, esto funciona bien. Aquellos que están fuera de la pantalla no lo hacen - vuelven en blanco. mainDiv una solución que desplaza los objetos a la parte superior de mainDiv , sin embargo, esto es un error y visualmente poco atractivo.

¿Es posible especificar un objeto DOM que no es visible? Idealmente, me gustaría poder especificar un div que contiene y hacer que html2canvas ignore la visibilidad principal, de modo que pueda capturar objetos ocultos, pero salvo eso, me gustaría poder capturar objetos que simplemente se desplazan. pantalla.

¿Algún pensamiento, ideas? ¡Gracias!

---- Aquí hay un código de ejemplo. Básicamente, si tienes un montón de divs dentro de un div, iterar a través de ellos. De hecho, lo hago de forma recursively modo que solo se procesa uno a la vez, con la devolución de llamada llamando a la función recursiva, por lo que se parece a esto:

  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 vez que se completan las llamadas recursivas, ejecuta la función de devolución de llamada, que es una función que hará cosas con las imágenes.

Una vez más, todo esto funciona bien siempre que los objetos sean visibles dentro del div de desplazamiento que contiene todos los divs en #mainDiv. Sin embargo, una vez que cualquier parte de los divs se desplaza, se vuelven negras. De hecho, si la mitad de dos divs se desplazan (la mitad superior de uno, la mitad inferior de la siguiente), ambos se vuelven completamente negros.

Answer 1

Ah, ahora has probado la pantalla Div: ninguno; y Div display: absoluto; (o cómo te gustaría que apareciera tu div, quizás 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 2

Puedes usar la última versión de html2canvas. Esto resuelve todos los problemas de pixelación de imágenes y el problema del objeto de representación. Usé la versión 0.5.0-beta4 de Erik koopmans, refiérase esto y llamé html2canvas como se muestra a continuación:

$(''html,body'').scrollTop(0); // Take your <div> / html at top position before calling html2canvas

     html2canvas( $("#my_div"), {
         useCORS: true,
         dpi: 200,

          onrendered:function(canvas) {

              var str = canvas.toDataURL("image/png");
              var contentType = ''image/png'';
              console.log(str);
              b64Data =str;
              $(''#uploadedImage'').val(b64Data); // set image captured by html2canvas
              imgFrameSave(); // Call a function to save your image at server side.
          }
        })

Answer 3

Sé que esta es una vieja pregunta pero me pareció algo interesante. Según mis pruebas, parecía que la única position: absolute y position:fixed elementos position:fixed que estaban fuera de la vista causaron este problema. Me di cuenta de una solución al problema.

Lo que estoy haciendo es hacer un clon del elemento. Estableciendo el estilo del clon a la left = 0 , top = window.innerHeight (para que no esté dentro de la ventana) y position = ''relative'' . Luego agrego el clon al cuerpo, uso html2canvas en el clon y luego html2canvas el clon del cuerpo. Esta solución funciona para mí en IE, Firefox y Chrome.

He creado un ejemplo de JSBin aquí . Aquí está el código javascript clave:

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 4

establezca ''desbordamiento'' como visible para todos sus elementos primarios. Despues de renderizado quitalo

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