es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Leer como datos URL / async/await

26 May, 2023 Programación

Estoy intentando cambiar el tamaño de un archivo que recibo de Quill y enviarlo a un servidor.
Esto es lo que tengo:

async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
  // Redimensionar
  var newFile
  const reader = new FileReader();
  reader.onload = function (e) {
      var img = document.createElement("img");
      img.onload = function (event) {
        // Crear dinámicamente un elemento de lienzo
        var canvas = document.createElement("canvas");

        // Se obtiene el contexto del lienzo
        var ctx = canvas.getContext("2d");

        // Redimensionamiento real
        ctx.drawImage(img, 0, 0, 300, 300);

        // Mostrar la imagen redimensionada en un elemento de vista previa
        canvas.toBlob(blob => {
          newFile = blob; 
          console.log(newFile);
        });
      }
      img.src = e.target.result;
  }
  reader.readAsDataURL(file);

  // Esperar a que se complete la redimensión de la imagen
  await new Promise(resolve => {
    const checkNewFile = () => {
      if (newFile) resolve();
      else setTimeout(checkNewFile, 10);
    };
    checkNewFile();
  });

  console.log(newFile);
  // Enviar datos al servidor 
}

Quiero hacer que este código funcione de manera asíncrona, de modo que el segundo console.log(newFile) también devuelva un valor correcto, lamentablemente, no sé cómo actualizar el código.

¡Cualquier ayuda es enormemente apreciada! 🙂

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Puedes usar async/await para hacer que el código funcione según lo previsto. Puedes envolver FileReader en una función async y esperar la llamada reader.readAsDataURL(file). Luego, puedes esperar la llamada canvas.toBlob y asignar el resultado a newFile. Finalmente, puedes console.log(newFile) después de la llamada canvas.toBlob.

    Aquí tienes un ejemplo del código actualizado:

    async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
  // Redimensionamiento
  var newFile
  const reader = new FileReader();
  await async function() {
    reader.onload = function (e) {
        var img = document.createElement("img");
        img.onload = function (event) {
          // Crear dinámicamente un elemento canvas
          var canvas = document.createElement("canvas");

          //var canvas = document.getElementById("canvas");
          var ctx = canvas.getContext("2d");

          // Redimensionamiento real
          ctx.drawImage(img, 0, 0, 300, 300);

          // Mostrar la imagen redimensionada en el elemento de vista previa
          canvas.toBlob(blob => {
            newFile = blob; 
            console.log(newFile)                           
          });
        }
        img.src = e.target.result;
      }
    await reader.readAsDataURL(file);
  }

  console.log(newFile)
  //Enviar datos al servidor 
}

Comments are closed.