Html2canvas: La etiqueta de imagen no captura

Le falta la precarga de imágenes, que en sí misma es asincrónica, por lo que deberá envolverla en devoluciones de llamada. Probablemente también esté usando una versión anterior, por lo que le recomiendo obtener la última versión de https://github.com/niklasvh/html2canvas/downloads y luego probar con:

html2canvas( $('table'), {
   onrendered: function( canvas ) {
        var img = canvas.toDataURL();
        $('#calendar_to_canvas').attr('src', img);
   }
});

Gracias por la respuesta rápida, descargué la última versión y probé el código anterior, todavía no aparece la etiqueta de imagen en el lienzo renderizado. ¿Me falta algo? Agregué html2canvas.js, jquery.plugin.html2canvas y usé jquery 1.7. Tu ayuda es muy apreciada.

¿Están las imágenes alojadas en el mismo origen que la página que está renderizando?

Configure logging: true y compruebe lo que dice la consola sobre las imágenes, ¿están fallando?

Las imágenes se están cargando perfectamente, consulte los registros a continuación:

html2canvas: Comienza la precarga: búsqueda de imágenes de fondo html2canvas.js: 27
html2canvas: start: images: 1/1 (fallido: 0) html2canvas.js: 27
html2canvas: start: images: 2/2 (fallido: 0) html2canvas.js: 27
html2canvas: start: images: 3/3 (fallido: 0) html2canvas.js: 27
html2canvas: start: images: 4/4 (fallido: 0) html2canvas.js: 27
html2canvas: start: images: 5/5 (fallido: 0) html2canvas.js: 27
html2canvas: start: images: 6/6 (fallido: 0) html2canvas.js: 27
html2canvas: start: images: 7/7 (fallido: 0) html2canvas.js: 27
html2canvas: Precarga: Encontrar imágenes html2canvas.js: 27
html2canvas: Precarga: Hecho. html2canvas.js: 27
html2canvas: start: images: 8/18 (fallido: 0) html2canvas.js: 27
html2canvas: start: images: 9/18 (fallido: 0) html2canvas.js: 27
html2canvas: start: images: 10/18 (fallido: 0) html2canvas.js: 27
html2canvas: start: images: 11/18 (fallido: 0) html2canvas.js: 27
html2canvas: start: images: 12/18 (fallido: 0) html2canvas.js: 27
html2canvas: start: images: 13/18 (fallido: 0) html2canvas.js: 27
html2canvas: start: images: 14/18 (fallido: 0) html2canvas.js: 27
html2canvas: start: images: 15/18 (fallido: 0) html2canvas.js: 27
html2canvas: start: images: 16/18 (fallido: 0) html2canvas.js: 27
html2canvas: start: images: 17/18 (fallido: 0) html2canvas.js: 27
html2canvas: start: images: 18/18 (fallido: 0) html2canvas.js: 27
Imágenes de carga finalizadas: # 18 (fallido: 0) html2canvas.js: 27

No se pueden obtener datos de imagen del lienzo porque el lienzo se ha contaminado con datos de origen cruzado.

html2canvas: Renderer: renderizador de lienzo hecho - devolviendo el objeto de lienzo

El archivo javascript y la imagen se encuentran en el mismo directorio además del comentario anterior.

Hola niklasvh, funcionó a la perfección con el mismo problema de política original, resolví la ejecución en el servidor web que anteriormente se ejecutaba localmente usando file: // esto se ve como un problema de dominio cruzado. Gracias por guiarme en la dirección correcta. Este es un gran complemento :)

Niklashvh, estoy tratando de hacer esto para la aplicación híbrida de Android, que se ejecuta localmente usando file: // ¿me pueden guiar para resolver este problema de dominio cruzado o cualquier sugerencia muy apreciada?

Si no necesita exportar la imagen a ninguna parte, siempre puede configurar allowTaint: true

Estamos exportando la imagen a la memoria y enviándola como pdf por correo electrónico

Tengo el mismo problema, el registro es el siguiente:

html2canvas: Inicio de la precarga: búsqueda de imágenes de fondo de 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 lienzo de obj

las imágenes están ubicadas en la imagen de fondo, solo cargue la imagen principal div, los presos no se muestran.

No hay problema porque las imágenes cruzadas están en el mismo dominio.

¿Alguna idea?

si agrego "background-size: cover;" al estilo, la imagen no aparece ...

aparentemente este es el problema

y funcionó !!, solo tengo que poner "background-size: 100% 100%;" en lugar de "background-size: cover;"

HTML @ Canvas no captura cuando se usa la URL en línea con img, ¿cuál es la solución para este problema?
Gracias

@ Elgamal10 usa proxy

https://github.com/brcontainer/html2canvas-php-proxy (proxy html2canvas con php)
https://github.com/brcontainer/html2canvas-asp-vbscript-proxy (proxy html2canvas con asp-classic - vb)
https://github.com/brcontainer/html2canvas-csharp-proxy (proxy html2canvas con asp.net - csharp)

Nota: lea el archivo README.md

gracias por su respuesta, es una buena captura de pantalla, pero hay errores como:

html2canvas_5 no está definido
html2canvas_0 no está definido
html2canvas_5 no está definido
html2canvas_4 no está definido
html2canvas_1 no está definido
html2canvas_5 no está definido

@ Elgamal10 crea un problema en el proyecto
https://github.com/brcontainer/html2canvas-csharp-proxy/issues?state=open

Creo que usa C # (ASP.NET), ¿verdad?

Hola Niklas,

Empecé a usar tu api y es genial ... pero estoy atascado, ¿puedes ayudarme?

Estoy tratando de convertir un html en lienzo usando el código:
jQuery ('html'). html2canvas ({
proxy: " http: //localhost/myproject/proxy.jsp ",
userCORS: verdadero ,
onrendered: function (lienzo) {
alerta (lienzo);
var url = canvas.toDataURL ("imagen / png");
window.open (url, '_blank');
},
});

Ahora tengo un archivo llamado proxy.jsp que guarda todas las imágenes de origen cruzado en la ruta ~ / tomcat / myproject / images / "

Después de eso, veo esto en la consola.
Recurso interpretado como script pero transferido con el tipo MIME image / jpeg: " http: //localhost/myproject/proxy.jsp? Url = http% 3A% 2F% 2Fi.ebayi … QYEAAMXQVERSuVtL% 2F% 24_1.JPG% 3Fset_id% 3D8800004005 & callback = html2canvas_64 ". html2canvas.js: 2264

Después de todo esto, mi función de devolución de llamada no se ejecuta y no puedo crear un lienzo.

¿Qué se puede hacer? ¿Podrías ayudarme por favor?

Muchas gracias

@ himakshi89 no puedes usar proxy: y userCORS: al mismo tiempo.

Prefiere usar proxy.
Nota: intenta capturar el cuerpo.

en su código le queda una coma:

},//this is wrong.

});

¿Qué versión de tu html2canvas?

Prueba esto:

jQuery('body').html2canvas({
    "onrendered": function(canvas) {
    }
});

Si no funciona, intente descargar html2canvas este https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js y use este código:

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

@brcontainer
Hola

He modificado mi código y ahora estoy enviando la respuesta de proxy.jsp como
({"html2canvas_67": http: //localhost/myproject/0.1651487380333363.jpg "})

Ahora no se muestran errores en la consola.
Pero ahora no pasa nada ... ¿Qué debería estar pasando o hay algún lugar que deba cambiarse?

Por favor ayuda

Pero como la consola no puede mostrar nada
usaste mi segundo código de muestra? envía registros a la consola.

Intente proporcionar su código en línea para realizar la prueba.

Como sugerí, eliminé useCORS y reemplacé html con body

jQuery ('cuerpo'). html2canvas ({
proxy: " http://nisquare.dyndns.org : 8087 / facebook / proxy.jsp",
registro: verdadero ,
onrendered: function (lienzo) {
var url = canvas.toDataURL ("imagen / png");
window.open (url, '_blank');
}
});

También estoy recibiendo esta es mi consola
html2canvas: Error al cargar : http://cmsip.tradus.ibcdn.com/MOBMKXE29ULYUMKH_4902586_320x360.jpg html2canvas.js: 21

He adjuntado una captura de pantalla de lo que obtengo.

Intentó descargar https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js

y este código:

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

¿o no?

NOTA: ¡ http://nisquare.dyndns.org:8087/facebook/proxy.jsp está roto!

Había descargado la última versión

Reemplazo el código con lo siguiente

html2canvas ($ ("cuerpo"). get (0), {
proxy: " http://nisquare.dyndns.org : 8087 / facebook / proxy.jsp",
registro: verdadero ,
onrendered: function (lienzo) {
var url = canvas.toDataURL ("imagen / png");
window.open (url, '_blank');
}
});

envíame la prueba de enlace

Estoy usando esta es la extensión de Chrome y la extensión todavía está en modo de desarrollo

¿"Extensión de Chrome" con JSP?

el jsp se usa solo para la parte del proxy. Según usted, ¿qué es más preferible?

La extensión de Chrome se ejecuta en otro "protocolo" y "marco", proxy.jsp utiliza el protocolo HTTP.

Creo que las extensiones de Chrome no requieren proxy. Usar como:

html2canvas($("body").get(0), {
    "logging": true,
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

LEER: http://developer.chrome.com/extensions/tut_debugging.html

@brcontainer
Hola, gracias por la idea ... ahora estamos usando una API proporcionada por Chrome. Tiene una función chrome capturevisibletab que resuelve o problema muy fácilmente :)

@ jgab-net muchas gracias. Se buscó demasiado tiempo para el error

@Sumit8 (Y) you're welcome

@gitbala ¿Su problema está resuelto? @niklasvh ¿ solucionar este problema? (Dejaré con la clasificación de errores si esto es molesto .. :)

@usmonster, por

Sí, está resuelto :)

El lunes 1 de septiembre de 2014 a las 4:11 a. M., Usmonster [email protected] escribió:

@gitbala https://github.com/gitbala ¿Su problema está resuelto? @niklasvh
https://github.com/niklasvh ¿Se puede
el triaje de errores es esto es molesto .. :)

-
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/niklasvh/html2canvas/issues/145#issuecomment -54047596
.

Estoy usando html2canvas: la imagen local no se muestra en pdf. ¿Cuál es la solución para esto?

@niklasvh pls ayuda: la imagen del logotipo en html no se muestra en pdf

Fallé al convertir la imagen en línea. Cómo usar "proxy": " http: //localhost/myproject/proxy.jsp ", uso vue, dónde poner este jsp y no sé cómo usar @niklasvh, ¿puedes ¿ayuda?

@qiuyaofan tiene el mismo problema, ¿ @gitbala, ¿

+1 Por cierto, los registros se ven bien ( html2canvas: Images loaded, starting parsing ) pero todavía no veo las imágenes en el pdf.

Estoy usando

allowTaint: verdadero,
useCORS: verdadero,
taintTest: falso,

@NikhilRadadiya @qiuyaofan chicos, también han estado buscando una solución justa del lado del cliente. Usando vue js y obteniendo una imagen de un giphy. Así que aquí está el que funcionó bien para mí:

html2canvas(element, {
        "logging": true, //Enable log (use Web Console for get Errors and Warings)
        useCORS: true,
        taintTest: false,
        onrendered: function(canvas) {
          var img = new Image();
          img.onload = function() {
            document.body.appendChild(img);
          };
          img.error = function() {
            if(window.console.log) {
              window.console.log("Not loaded image from canvas.toDataURL");
            } else {
              alert("Not loaded image from canvas.toDataURL");
            }
          };
          img.src = canvas.toDataURL("image/png");
        }
      });

Así que no se ha utilizado ningún proxy.

@creepteed Tengo otros elementos que necesito convertir a lienzo y luego guardar en pdf, mi html no contiene solo imágenes, si este es el caso, ¿cómo puedo usar la función anterior que ha publicado?

Hola @niklasvh ,
Quiero capturar una página web usando htmltocanvas, todo funciona bien, pero cuando intento capturar una página web, no obtengo imágenes.
¿Me puedes ayudar?
Aquí está mi código:
function capture(div_id=null) { jQuery(".screenshot_row_target").html2canvas({ logging: true, //taintTest : true, //proxy: "https://skeleton-21.myshopify.com", onrendered: function (canvas) { jQuery('#screenshot_img_val').val(canvas.toDataURL("image/png")); //document.getElementById("screenshot_html_form").submit(); } }); }

En la consola, obtengo esto
html2canvas: Preload starts: finding background-images html2canvas.js:19 html2canvas: Preload: Finding images html2canvas.js:19 html2canvas: Preload: Done. html2canvas.js:19 html2canvas: start: images: 0 / 0 (failed: 0) html2canvas.js:19 Finished loading images: # 0 (failed: 0) html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/files/1/2186/4293/files/user2_300x300.png?v=1503661428 html2canvas.js:19 html2canvas: Error loading background: html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_300x300.gif html2canvas.js:19 html2canvas: Renderer: Canvas renderer done - returning canvas obj
Gracias.