Html2canvas: Problemas con las imágenes de fondo

Parece estar corregido con 0.4.1 (en la rama de desarrollo). Probablemente relacionado con el # 256

¿Podría probar con 0.4.1 y ver si el problema persiste?

Hola. Tengo exactamente el mismo problema. Sí, el problema todavía existe en 0.4.1. Gracias por toda la ayuda.

Tengo el mismo problema ... ¿Alguna solución todavía? Gracias Niklas por este increíble guión.

Este código no se procesará.
div class = "mc-image" title = "" style = "background- image: url ('http://eterni-t.design.s3.amazonaws.com/381/theme-154-original-1.jpg' ); ancho: 1025 px; alto : 780 px; índice z: 9999 "

Me he dado cuenta de que si elimino background-size: cover; de mi clase = "mc-image" funciona.

@ ymorin007 ¿Estás en Mac y Chrome / Opera / Safari y / o estás usando la última confirmación (es decir, construiste el script tú mismo)?

Windows7 Chrome Versión 30.0.1599.101 m

Corrección de temperatura:

cambie la línea 2818 a

ctx.fillStyle = (options.background !== undefined) ? options.background : parsedData.backgroundColor;

Definitivamente está relacionado con dos opciones del tamaño de fondo: contener o cubrir.

La última confirmación (html2canvas 0.4.1) me lo arregló

El mío todavía está haciendo esto incluso después de la última confirmación ...

Mi tamaño de fondo está configurado en 'cubrir' y también probé 'auto 100%' y aún es blanco / transparente.

Si elimino el tamaño de fondo, captura bien ... ¿más consejos?

Solución temporal, utilice:

b ackground: url ("... base64 ...")

y no uses

Además, no use "sprites" porque html2canvas no parece entender eso.

Tengo un problema con las imágenes de fondo cuando la URL contiene una ruta relativa al fondo del directorio superior: url ("../ i / alerts-16x.png")

Funciona si se reubica png de la siguiente manera en segundo plano: url ("i / alerts-16x.png")

No pude renderizar imágenes de fondo y parecía estar cubierta o contener un tamaño de fondo, así que cambié la línea 350 en la versión 0.4.1 a:

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

¡y funciona!

Estoy en la versión 0.4.1

También tengo problemas con los antecedentes.

Cambié en vivo 350 como lo sugirió fperich pero no ayudó.

También probé la imagen de fondo base64 recomendada por Hernan, tampoco alegría.

La URL que estoy tratando de convertir es esta
http://prompter.rareapps.org/prompt/prompt-save3.php?p=123

Se convierte con fondo cuando uso el renderizador de página web aquí
http://html2canvas.hertzen.com/screenshots.html

Pero en mi propia página no tiene antecedentes. Ver muestra aquí
http://prompter.rareapps.org/prompt/prompt-save3.php?p=123

El código que estoy usando es este

<script type="text/javascript">
$(window).load(function() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
        window.location.href = canvas.toDataURL('image/jpeg');
    },
    allowTaint: true,
    taintTest: false
    });
});
</script>

Básicamente, deja que la página se cargue y se convierta en imagen.

¿Hay algún problema con mi código?

Gracias

fperich u hombre de rock !! Gracias

Lo secundo, fperich, ¡eres mi persona favorita en este momento!

Gracias fperich: D funcionó bien

@shauchenka @niklasvh ¿Diría que este problema está resuelto? ¿Puede / debe resolverse este problema?

Usando 0.4.1 (tanto la versión como la última versión del desarrollador), la imagen de fondo de mis elementos secundarios (los niños son sprites) no aparece en el lienzo, al menos en Chrome para Windows. Sin embargo, Firefox para Windows funciona bien. En Chrome para Mac, aparece un cuadrado negro donde está el intervalo con la imagen de fondo. Intenté arreglar fperich pero no funcionó para mí. La imagen de fondo tiene el mismo origen, todos los archivos están en el mismo directorio del servidor.

@ 4gstudios ¿Puede poner un ejemplo simplificado en un jsfiddle (o en algún enlace de acceso público) para demostrar el problema?

@usmonster seguro. No usé jsfiddle porque no quería que las imágenes fueran externas, por lo que podemos descartar problemas de origen cruzado.

ahora adivina qué. Mientras preparaba esto, me di cuenta de que el problema parece estar en el png que quiero usar para mis sprites. Al principio pensé que tal vez el tamaño del archivo, pero en realidad parece ser un problema con las dimensiones del png.

podría tener algo que ver con la cantidad de información contenida dentro del png, ya que los png más complejos parecen exhibir el problema en dimensiones relativamente más pequeñas. No creo que tenga que ver necesariamente con el tamaño del archivo, ya que me he metido un poco con la optimización de png a través de tinypng.com y una imagen de mayor dimensión con un tamaño de archivo más pequeño tendrá el problema, mientras que una imagen de menor dimensión con un archivo más grande el tamaño no lo hará.

mira mi ejemplo: http://4gstudios.com/html2canvas/

el cuadro azul se muestra bien (la imagen bg es de 100x7800 píxeles / 374 kb)
el cuadro rojo no se procesa correctamente (la imagen bg es 100x25000 píxeles / 254kb)
-en OS X Chrome (caja negra)
-OS X Safari (casilla "no")
-y probablemente Win Chrome (sucedió ayer, pero no cerca de un cajero automático de PC)
-OS X Firefox parece funcionar bien.

Ojalá haya ilustrado bien lo que creo que es el problema y podamos resolverlo. el sprite que quiero usar en mi proyecto tiene más de 800 reglas CSS diferentes y ¡REALMENTE no quiero tener que cambiarlo!

editar: mi ejemplo usa 0.4.1 pero estoy teniendo el mismo problema cuando probé 0.5.0rc1

No tengo OS X disponible para probar, pero parece funcionar bien en Chrome 37 en Windows (Vista) y Chrome 38 beta en Linux (Debian wheezy). ¿Qué versión de Chrome estás usando? ¿Ha intentado realizar pruebas en modo incógnito / con todas las extensiones desactivadas?

@usmonster Acabo de probar en Chrome 36 (Win7) y luego se actualizó a Chrome 37 (Win7), todavía tengo el problema

@ 4gstudios si

Además, actualice el ejemplo en su sitio para usar solo lo que se encuentra actualmente en la rama maestra, incluso si tiene el mismo problema. Será de gran ayuda con la depuración.

En tercer lugar, verifique también si este problema aparece o no incluso cuando todas las extensiones de Chrome están deshabilitadas. (Si es así, me pregunto si es un problema de tiempo, ya que tal vez la descarga y / o el renderizado de la imagen sea demasiado lento).

@usmonster

1) el registro está activado ...
html2canvas: Comienza la precarga: búsqueda de imágenes de fondo html2canvas.js: 21
html2canvas: Precarga: Encontrar imágenes html2canvas.js: 21
html2canvas: Precarga: Hecho. html2canvas.js: 21
html2canvas: start: images: 1/2 (fallido: 0) html2canvas.js: 21
html2canvas: start: images: 2/2 (fallido: 0) html2canvas.js: 21
Imágenes de carga finalizadas: # 2 (fallido: 0) html2canvas.js: 21
html2canvas: Renderer: renderizador de lienzo hecho - devolviendo el obj de lienzo html2canvas.js: 21

2) Actualizado a la rama maestra html2canvas.js

3) Sí, lo intenté con todos los discapacitados. Si es el momento, no creo que sea el tiempo de descarga, pero es muy posible que sí.

@ 4gstudios ¿Tiene otra máquina para probar? Además, el enlace en vivo todavía parece estar usando 0.4.1.

@usmonster oh ok mi mal, lo arreglé. acabo de probarlo también en una máquina WinServer2012, Chrome 37, el mismo problema con la representación de la caja negra en lugar de bg

Hm, todavía no puedo reproducir el problema en ninguna de mis máquinas disponibles, pero un colega podría hacerlo en su máquina con Windows 7. @niklasvh , @brcontainer ¿ alguna idea? Estoy pensando que tiene algo que ver con la composición / rasterización acelerada por GPU específica de la plataforma ... Intentaré probar esto más adelante esta semana si puedo acceder a mi máquina W7, pero tengo curiosidad ... @ 4gstudios , ¿qué sucede si reduce a la mitad la segunda imagen y vuelve a realizar la prueba? ¿Y seguir reduciéndolo a la mitad (y ajustando la regla CSS) hasta que el error desaparezca? Quiero ver si hay una región "interesante" de PNG que desencadena este problema.

@usmonster Ocurrió en mi Windows 7 x64 con Chrome. Intentaré hacer un DEBUG.
Hay algunos problemas que ocurren en windows7x64 pero no ocurre en la versión 32, creo que es un error de Chrome.

Estoy bastante seguro de que esto está relacionado con el tamaño de la imagen original. Hay muchos resultados variables con la representación de imágenes grandes o lienzos grandes, y hasta donde yo sé, no hay realmente ninguna forma inteligente de detectar la compatibilidad con ninguno de ellos.

Si bien no está directamente relacionado con el tamaño de la imagen de origen, los resultados variables le darán una idea de los problemas con las imágenes grandes y los lienzos que tienen:

• http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element
• http://social.msdn.microsoft.com/Forums/windowsapps/en-US/53c368e5-042b-4c3f-8903-ee024f4f7933/canvas-max-size?forum=winappswithhtml5
• https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482 -SW15

Probablemente debería configurar algunas pruebas tanto para los tamaños máximos de imagen como para los tamaños de lienzo para diferentes navegadores / sistemas operativos / límites de memoria para obtener una comprensión más sólida de dónde están los límites y si se pueden eludir de alguna manera, por ejemplo, dividiendo la representación en trozos más pequeños .

@ 4gstudios @brcontainer ¿cuánta memoria tienen sus dispositivos donde pudo replicar el problema?

@niklasvh

• Windows 7 Home Premium x64
• CPU Intel Core i5 M450 de 2,40 Ghz
• 4 GB de RAM

Probaré en Windows de 32 bits (tan posible), pero creo que el problema ocurre solo en Windows de 64 bits

como sospechaba, el problema solo ocurre en "Windows x64", así como en https://github.com/niklasvh/html2canvas/issues/206#issuecomment -17744888, en otras palabras, funciona en Windows de 32 bits, falló en Windows de 64 bits , un error probable de Chrome.

@brcontainer, el problema me ocurre en Chrome y Safari en OS X 10.7 también ...

También probé en mi máquina con Windows 7 de 32 bits y todo funciona bien (sin errores). Definitivamente, esto parece un problema exclusivo del sistema de 64 bits: ¡buen truco, @brcontainer! Otra cosa a tener en cuenta es que recientemente se lanzó una nueva versión de Chrome específicamente para sistemas de 64 bits:

http://blog.chromium.org/2014/08/64-bits-of-awesome-64-bit-windows_26.html
https://www.google.com/chrome/browser/?platform=win64 (enlace de descarga de Windows)
http://blog.chromium.org/2014/08/mac-chrome-when-im-sixty-four-bits.html (Mac todavía está en beta)

Para aquellos que han encontrado este problema, ¿está seguro de que todavía no está ejecutando la versión de 32 bits? Creo que necesitas descargar manualmente la versión de 64 bits para obtenerla. Existe la posibilidad de que resuelva estos problemas.

@usmonster bueno, mi Windows7 es de 64 bits. El error afecta tanto a Chrome de 32 bits como de 64 bits en Win7 de 64 bits. Supongo que también afecta a algunas máquinas OSX. Gracias por el enlace para obtener la versión de 64 bits de Chrome, aunque no resuelve mi problema: llorar:

esto suena como un error en Chrome y no una incompatibilidad con "Windows 64bit" (o Mac OSX)

@brcontainer Estoy de acuerdo en que parece un problema con los navegadores Chrome y WebKit en Windows y Mac de 64 bits (pero no en Linux ... al menos no en mi caja Debian de 64 bits con 8 GB de RAM), aunque @ 4gstudios , fueron ¿Puede ver el error en Windows de 32 bits? ¿Y cuánta RAM tenía en sus máquinas afectadas por el problema?

Sería bueno poder reducir este problema a su raíz. El segundo PNG tiene degradados y dimensiones mucho más grandes que el primer PNG. Si tuviera una máquina afectada para probar, cortaría el PNG "malo" hasta que pudiera saber si hay una región o tamaño problemático en particular que lo causa. (Posiblemente también de interés para @niklasvh : http://wkbug.com/52391)

@usmonster @niklasvh

En AppleWebkit (versión 538.1) y "Safari 5.1.7" (versión 534.57.2 - este navegador no recibe más actualizaciones) para Windows .then no funciona (no dispara / dispara).

Así que no pude probar si es una falla de "Webkit" o una falla de "Blink" (bifurcación del motor de Webkit en Chrome) o incluso una falla por falta de "RAM".

@brcontainer Creo que es seguro asumir que, dado que, según @ 4gstudios , el error se

@usmonster No pude probar las ventanas porque .then(...) no se ejecuta en AppleWebkit (versión 538.1)

@usmonster He hecho una especie de recorte mientras creaba mi ejemplo, pero no de una manera súper científica. Voy a intentar documentarlo mejor cuando tenga algo de tiempo, pero probablemente no será así hasta dentro de una semana.

@usmonster , @brcontainer , @niklasvh , gracias por toda su ayuda con el problema

@niklasvh onrendered está obsoleto. Entonces, ¿qué puedo usar en su lugar? Estoy usando 0.5.0-alpha1.

Además, la imagen de fondo no se descarga aunque las imágenes están en el mismo dominio.

html2canvas ($ ("# tabla de descarga previa"), {
registro: verdadero,
onrendered: función (c) {
var myImage = c.toDataURL ("imágenes / jpeg");
$ ('# imagen descargable'). prop ('href', myImage);
}
});
Se agradecerá cualquier ayuda. Gracias

@ codegiant2 https://github.com/niklasvh/html2canvas#usage .

Gracias fperich, funcionó para mí !!

@fperich
¡Me ayudas mucho! ¡Muchas gracias!

Yo era el rostro de una imagen de fondo corporal recortada
(pequeño bounds.height de NodeContainer.prototype.parseBackgroundSize - html2canvas 0.5.0-beta3) mi

body {
    background-image: url(./res/bg.jpeg);
    background-repeat:no-repeat;
    background-position:center center;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

SOLUCIONADO agregando

html, body {
   margin: 0;
   padding: 0;
   height: 100%;
}

¡Gracias a Niklasvh ya todos los colaboradores por este buen código!

También tengo el mismo problema, estoy cargando desde la imagen s3 que no se muestra en el lienzo, pero estoy cargando localmente en mi sistema, funciona bien, ¿cómo puedo resolverlo?

yo también tengo el mismo problema.

La imagen de fondo no se pudo cargar. Recibo un mensaje de error Error al cargar el fondo:

jsFiddle aquí

Ayúdame a solucionar este problema.
Gracias,

Hola @gopiss ,

Utilice la opción de corse.

html2canvas(document.body, {
            onrendered: function (canvas) {
.....
            },
            useCORS: true
        });

@fxmontigny.
Aún existe el problema de carga de la imagen del JSFiddle actualizado.
la imagen del borde no se carga, solo muestra un borde de color negro.

Estoy enfrentando el mismo problema. a continuación se muestran los registros de la consola de Chrome
html2canvas: Comienza la precarga: búsqueda de imágenes de fondo
html2canvas.js: 21 html2canvas: start: images: 1/1 (fallido: 0)
html2canvas.js: 21 html2canvas: start: images: 2/2 (fallido: 0)
html2canvas.js: 21 html2canvas: Precarga: Encontrar imágenes
html2canvas.js: 21 html2canvas: Precarga: Listo.
html2canvas.js: 21 html2canvas: start: images: 2/2 (fallido: 0)
html2canvas.js: 21 Finalizó la carga de imágenes: # 2 (falló: 0)
html2canvas.js: 21 html2canvas: Error al cargar el fondo:
html2canvas.js: 21 html2canvas: Renderer: renderizador de lienzo hecho - devolviendo el obj de lienzo

¿Sigue siendo un problema con la v1.0.0 ? Si es así, ¿podría compartir un ejemplo en jsfiddle .

Este problema se ha cerrado automáticamente porque no ha habido respuesta a nuestra solicitud de más información del autor original. Con solo la información que se encuentra actualmente en el problema, no tenemos suficiente información para tomar medidas. Comuníquese con nosotros si tiene o encuentre las respuestas que necesitamos para que podamos investigar más.

Solo comentar que esto puede ayudar a alguien.
Mi problema era que a nivel local todo funcionaba, pero en producción fallaba al renderizar imágenes de fondo CSS.
La razón era que estábamos usando CloudFront, lo que significa que las URL en el archivo css se referían a activos en el dominio de CloudFront, mientras que JS se estaba ejecutando en un dominio separado.
Sin embargo, el registro de html2canvas no indicaba que fuera un problema de cors.
'useCORS' no parece funcionar por sí solo, ya que creo que requiere una URL de proxy o algo así.

@jacobclarke para mí también es el mismo problema al usar html2canvas para capturar las imágenes de fondo en el lienzo en las imágenes locales de S3 que se están capturando, pero en producción no se están capturando las imágenes de fondo. mi versión html2canvas es v1.0.0