html2canvas no funciona para múltiples dives como lienzo -- javascript campo con jquery campo con html campo con html2canvas camp Relacionados El problema

html2canvas not working for multiple div as canvas


1
vote

problema

Español

He intentado html2canvas para un solo div y está funcionando bien. Ahora tengo 2 gráficos en la página, así que quiero capturar tanto DIV en lienzo separado y pasarlo como imagen. Intenté seguir pero siempre se estableció para indefinido. No sé cuál es el problema. Cuando voy al modo de depuración en Firebug, descubrí que primero no va en HTML2CANVAS, entra en Ajax y después de la ejecución de Ajax, va a HTML2CANVAS.

  $("#getPdf").click(function () {     var imageChart1, imageChart2;     html2canvas($('#loadchart1'), {          onrendered: function (canvas1) {             imageChart1 = canvas1.toDataURL("image/png");              alert(imageChart1);              imageChart1 = imageChart1.replace('data:image/png;base64,', '');         }     });     html2canvas($('#loadchart2'), {          onrendered: function (canvas2) {              imageChart2 = canvas2.toDataURL("image/png");              imageChart2 = imageChart2.replace('data:image/png;base64,', '');          }     });     if (imageChart1 != undefined && imageChart2 != undefined) {         $.ajax({             type: 'POST',             url: "/ChartReport/UploadImage",             data: ' { "image1" : "' + imageChart1 + '","image2":"' + imageChart2 + '"}',             contentType: 'application/json; charset=utf-8',             dataType: 'json',             success: function (msg) {                 alert('Image saved successfully !');             }             });     } });   

Después de la edición para ASYNC:

  $("#getPdf").click(function () {  var count = 0;  var imageArray = new Array("#loadchart1", "#loadchart2");  async.parallel([   function (callback) {     for (var i = 0; i < imageArray.length; i = i + 1) {       html2canvas($(imageArray[i]), {       onrendered: function (canvas) {         var imageChart1 = canvas.toDataURL("image/png").replace(' :image/png;base64,', '');         $.ajax({          type: 'POST',          url: "/ChartReport/UploadImage",          data: ' { "image1" : "' + imageChart1 + '" }',          contentType: 'application/json; charset=utf-8',          dataType: 'json',          success: function (msg) {           count = count + 1;          }         });       }     });    }    callback();   },   function (callback) {    if (count != 0) {     $.ajax({      type: 'POST',      url: "/ChartReport/makePDF",      contentType: 'application/json; charset=utf-8',      dataType: 'json',      success: function (msg) {       alert('Image saved successfully !');      }     });    }    callback();   } ],   function (err, results) {    alert(results[0]);   }); });   

Nota: DIV MARGCHART1 está en vista parcial y obtiene carga en el documento.ready ()

Original en ingles

I have tried html2canvas for single div and it is working fine. Now I have 2 charts on page, so I want to capture both div in separate canvas and pass it as image. I tried following but it always set to undefined. I don't know what is the problem. When I go to debug mode in firebug I found that it doesn't go in html2canvas first, it goes in ajax and after execution of ajax, it goes to html2canvas.

$("#getPdf").click(function () {     var imageChart1, imageChart2;     html2canvas($('#loadchart1'), {          onrendered: function (canvas1) {             imageChart1 = canvas1.toDataURL("image/png");              alert(imageChart1);              imageChart1 = imageChart1.replace('data:image/png;base64,', '');         }     });     html2canvas($('#loadchart2'), {          onrendered: function (canvas2) {              imageChart2 = canvas2.toDataURL("image/png");              imageChart2 = imageChart2.replace('data:image/png;base64,', '');          }     });     if (imageChart1 != undefined && imageChart2 != undefined) {         $.ajax({             type: 'POST',             url: "/ChartReport/UploadImage",             data: ' { "image1" : "' + imageChart1 + '","image2":"' + imageChart2 + '"}',             contentType: 'application/json; charset=utf-8',             dataType: 'json',             success: function (msg) {                 alert('Image saved successfully !');             }             });     } }); 

After edit for async:

$("#getPdf").click(function () {  var count = 0;  var imageArray = new Array("#loadchart1", "#loadchart2");  async.parallel([   function (callback) {     for (var i = 0; i < imageArray.length; i = i + 1) {       html2canvas($(imageArray[i]), {       onrendered: function (canvas) {         var imageChart1 = canvas.toDataURL("image/png").replace(' :image/png;base64,', '');         $.ajax({          type: 'POST',          url: "/ChartReport/UploadImage",          data: ' { "image1" : "' + imageChart1 + '" }',          contentType: 'application/json; charset=utf-8',          dataType: 'json',          success: function (msg) {           count = count + 1;          }         });       }     });    }    callback();   },   function (callback) {    if (count != 0) {     $.ajax({      type: 'POST',      url: "/ChartReport/makePDF",      contentType: 'application/json; charset=utf-8',      dataType: 'json',      success: function (msg) {       alert('Image saved successfully !');      }     });    }    callback();   } ],   function (err, results) {    alert(results[0]);   }); }); 

Note: div loadchart1 is in partial view and it gets load on document.ready()

           

Lista de respuestas

1
 
vote

OK, no conozco la biblioteca HTML2CANVAS, pero de la apariencia lo que está equivocado es que está confundiendo el flujo a través del código. Está asignando a task14 en una devolución de llamada de la función HTML2CANVAS, por lo que se alcanza el task15 antes de que se puedan asignar las variables. Lo que debe consultar es task16 y use el task17 Función.

 

Ok, I don't know the html2canvas library, but from the looks what is going wrong is that you're confusing the flow through the code. You are assigning to imageChartN in a callback of the html2canvas function, so the if is reached before the variables can be assigned. What you should check out is async.js and use the async.parallel function.

 
 
   
   

Relacionados problema

-1  Uso de HTML2CANVAS para convertir a la imagen en KeyUp & KeyPress  ( Using html2canvas to convert to image on keyup keypress ) 
Estoy construyendo una aplicación donde el usuario puede escribir algo dentro de input y se convertirá a una imagen que puedan descargar. Yo uso html2can...

1  Representación HTML2CANVAS con Internet Explorer  ( Rendering html2canvas with internet explorer ) 
Seguí este tema < / a> Pero, lamentablemente, estoy usando Bower para poner a LIB en el vendedor. Por alguna razón, si tuviera que tomar una captura de pan...

0  ASP.NET C # imprime el mapa de Google con los marcadores  ( Asp net c sharp print google map with markers ) 
Aquí está el código que estoy usando que no está funcionando. Obtiene el mapa, pero no hay marcadores a pesar de que se muestran en la pantalla correctamente:...

0  HTML2CANVAS y DOMPDF obtendrán la fuente de imagen en blanco  ( Html2canvas and dompdf getting blank image source ) 
Estoy usando dompdf y html2canvas . Estoy tratando de convertir un div en imagen y transferir esa imagen a través de AJAX. Luego, en mi código del lado d...

1  HTML2CANVAS elimina múltiples espacios y saltos de línea  ( Html2canvas remove multiple spaces and line break ) 
Estoy usando HTML2CANVAS para hacer que la imagen HTML HTML. Pero admite solo un solo espacio en blanco entre la palabra y también todo el texto se muestra so...

0  Cómo provocar una biblioteca de JavaScript como HTML2CANVAS  ( How to stub a javascript library like html2canvas ) 
Tengo que probar una aplicación Ember que utiliza la biblioteca HTML2CANVAS, pero la prueba está fallando y creo que es debido a la promesa. Ya he envuelto la...

0  Retire las formas de lienzo usando Fabricjs  ( Remove shapes from canvas using fabricjs ) 
Necesito eliminar una forma del lienzo. Estoy usando el siguiente código, pero algunas veces no funciona, estoy usando Fabricjs para crear formas. ¿Alguien pu...

2  HTML2CANVAS hace que la página con diseño incorrecto en IE11 Whed DevTools no se abre  ( Html2canvas renders page with wrong layout in ie11 whed devtools not opened ) 
Estoy tratando de arreglar el error relacionado con la página web de renderización a Canvas a través de html2canvas en IE11. Los problemas son un poco confu...

8  Error HTML2CANVAS: Error no capturado: IndexSizeError: Dom Exception 1  ( Html2canvas error uncaught error indexsizeerror dom exception 1 ) 
Estoy usando HTML2CANVAS para convertir un div en un lienzo. Me gusta esto: <script src="js/libs/jquery-1.7.1.min.js"></script> <script src="js/libs/jquery...

0  El problema de HTML2CANVAS en IE, pero funciona bien con Chrome y Firefox  ( Html2canvas issue on ie but works fine with chrome and firefox ) 
Estaba tratando de capturar una imagen de Google Map usando el complemento HTML2CANVAS. Pude capturar la imagen en Chrome, así como en Mozilla Firefox. Pero n...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos