0

estoy guardando en un array dos elementos canvas para posteriormente convertirlos en variables con un ciclo, pero no logro acceder a los objetos que estoy guardando dentro del array, este es el codigo:

 var takeScreenShot = function() {
    var allImages = [];
        html2canvas(document.getElementById("target"), {
            useCORS: true,
            onrendered: function(canvas) {
               //document.body.appendChild(canvas);
               //saveimages(canvas);
               allImages.push(canvas);
            },
            width: 900,
            height: 250
         });

        html2canvas(document.getElementById("target2"), {
            useCORS: true,
            onrendered: function(canvas2) {
               //document.body.appendChild(canvas);
               //saveimages(canvas);
               allImages.push(canvas2);
            },
            width: 900,
            height: 600
         });
        console.log(allImages);
        saveimages(allImages);

    }

esta es la función que recibe el array:

 function saveimages(dates) {

    const idOrder = document.querySelector('#order_checklist').value;

        var mycanvas = document.getElementById('info-signature');

        console.log(mycanvas);
        console.log(dates[0]);
}

cuando intento acceder a la posición[0] del array me aparece undefined. introducir la descripción de la imagen aquí

como puedo acceder a los elementos de este array?

4
  • Hola puedes poner tu código HTML? ayudaría bastante.
    – user137354
    el 23 dic. 2019 a las 22:41
  • 1
    Probablemente éste enlace sea de ayuda. Saludos ;)
    – Israel-ICM
    el 23 dic. 2019 a las 22:42
  • @ClintonTapiaLagar , son básicamente dos tablas que intento volver imágenes con canvas, no me permite agregar mas codigo. el 23 dic. 2019 a las 22:56
  • Puedes subir todo el codigo para una mejor revisión,gracias. el 23 dic. 2019 a las 23:36

1 respuesta 1

0

Lo que necesitas es indicarle al código que se ejecute de manera secuencial, para que en el momento en que llame al metodo saveimages ya esté el arreglo que le pasas como parámetro con la información. Para eso has uso de async y await

Comparto enlace guia para comprender el funcionamiento de async y await async-await

Comparto un ejemplo funcional tomando como base el código que tienes.

function saveimages(dates) {
  console.log(dates[0]);
}

var html2canvas = function(param1, param2) {
  param2.onrendered(param1);
}

var takeScreenShot = async function() {
  var allImages = [];
  console.log('Antes del primer llamado del html2canvas')
  await html2canvas(document.getElementById("target"), {
    useCORS: true,
    onrendered: function(canvas) {
      allImages.push(canvas);
    }
  });
  console.log('Antes del segundo llamado llamado del html2canvas')
  await html2canvas(document.getElementById("target2"), {
    useCORS: true,
    onrendered: function(canvas2) {
      allImages.push(canvas2);
    }
  });

  console.log(allImages);
  saveimages(allImages);
}

window.onload = function() {
  takeScreenShot();
}
<div id="target"></div>
<div id="target2"></div>

Lo que hicimos en el código fué anexar unos console.log para poder observar el comportamiento que se tiene, el cual podemos decir que la lectura que se hace del código es secuencial y no paralela.

Espero te sirva. Saludos,

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.