html2canvas falta de fondo

Estoy usando html2canvas para generar imágenes desde mi página html.

Cuando ingreso mi url, http://prompter.rareapps.org/prompt/prompt-save2.php?p=123

en el renderizador de páginas web del sitio web html2canvas ( http://html2canvas.hertzen.com/screenshots.html ) mi página se muestra corectly con el fondo.

Pero cuando genero mi propio canvas, no tengo el fondo. Aquí está mi código

 $( document ).ready(function() { html2canvas(document.body, { allowTaint: true, taintTest: false, onrendered: function(canvas) { window.location.href = canvas.toDataURL('image/jpeg'); } }); }); 

¿Qué me perdí?

Gracias

Este problema se soluciona en la versión 0.5.0 (pero la versión 0.5.0 aún no está lista para su uso).

Pero tiene muchos problemas que se están corrigiendo y funciones básicas que aún no se han implementado.

Nota: html2canvas no tiene una fecha prevista para la versión 0.5.0 Nota: la versión 0.4.1 ya no recibe actualizaciones

El problema es que la versión 0.5.0 no está lista para ser utilizada. He vuelto a trabajar tu html, mira:

            

AUBREY

And Aubrey was her name

A not so very ordinary girl or name

But who's to blame?

For a love that wouldn't bloom

For the hearts that never played in tune

Like a lovely melody that everyone can sing

Take away the words that rhyme, it doesn't mean a thing

 

And Aubrey was her name

We tripped the light and danced together to the moon

But where was June?

No, it never came around

If it did it never made a sound

Maybe I was absent or was listening too fast

Catching all the words but then the meaning going past

 

But God I miss the girl

And I'd go a thousand times around the world just to be

Closer to her than to me

 

And Aubrey was her name

I never knew her but I loved her just the same

I loved her name

Wish that I had found the way

And the reasons that would make her stay

I have learned to lead a life apart from all the rest

If I can't have the one I want, I'll do without the best

 

But how I miss the girl

And I'd go a million times around the world just to say

She had been mine for a day

Prompter generated by RAREAPPS: http://prompter.rareapps.org

  • Trabajó en 0.4.1 y 0.5.0-rc .
  • Funcionó en Chrome y Firefox.

Tenga en cuenta que he creado una función llamada save() , por lo que puede alternar entre onrendered (versión 0.4.1) o then (versión 0.5.0-rc).

Puse su fondo y un

no cambió el y no el porque el “html2canvas” no es lo suficientemente inteligente como para entender las manipulaciones del overflow: en la ventana.

Tenga en cuenta que el margin:; en su último párrafo (

) causó problemas tanto en “html2canvas” como en el navegador “Webkit”, así que usé el padding:

Recuerde que hay más de una forma de hacer lo mismo.

establecer explícitamente un estilo de fondo, por ejemplo. Si

 ... html2canvas(document.body, { onrendered: function(canvas){ var imgData = canvas.toDataURL("image/jpeg"); var doc = new jsPDF('p','mm'); doc.addImage(imgData, 'JPEG', 15, 40, 180, 160); doc.save($.now()+'.pdf'); } 

el pdf tiene fondo en blanco (negro),

ahora si agrega estilo CSS

  body { background-color: white; } 

el fondo en blanco (negro) se corrige

Existe un problema con las imágenes de fondo cuyos atributos de fondo se configuran como portada en la versión 0.4.1, que es la última versión disponible actualmente.

La solución provista por ‘fperich’ en esta página resolvió mi problema: https://github.com/niklasvh/html2canvas/issues/265

De acuerdo con su solución, simplemente actualice la línea 350 en la versión 0.4.1 con la siguiente statement:

 topPos = isNaN(parseInt(bgposition[1], 10)) ? topPos : parseInt(bgposition[1], 10);