3

Trabajo con NodeJS, y actualmente, estoy teniendo un problema, el código es muy largo: pastebin.

El problema está en la línea 61, al programa, a veces no le da tiempo cargar la imagen antes de hacer resolve(c) (en la línea 78), así que envía la imagen canvas sin el avatar (la imagen de la línea 61).

img.onload = function() {
  ctx.drawImage(img, 5, 9, 90, 90);
}
img.src = buffer;

Este problema no pasa con imágenes jpg, pero también funciona con imágenes gif (ambos enlaces son avatars diferentes que he probado). El programa muestra correctamente las imágenes. En el caso del ejemplo con la imagen gif, la aplicación envía la siguiente imagen (la cual es correcta):

kotaruS

Sin embargo, el problema está cuando se usan gifs más pesados, (como el que tengo actualmente en Discord): link aquí.

Así que... supuse que era un problema de la ejecución asíncrona, ya que el programa está permitiendo la carga de imágenes gif ligeros. ¿Cómo puedo hacer para que esto puedo cargar mi avatar (el cual es un gif "pesado") de manera exitosa?

Ah, sin el img.onload, la aplicación mandaba el siguiente error: Image given has not completed loading.

He actualizado el código, aunque sigue sin cargar correctamente el avatar, hastebin (esta versión está comentada y es más limpia).

7
  • 1
    ¿Por qué haces uso de await en funciones donde no se devuelve una promesa? Por ejemplo, await ctx.drawImage(...) no tiene ninguna utilidad porque CanvasRenderingContext2D#drawImage no devuelve una promesa, es un método síncrono. Lo mismo para Buffer#concat.
    – gugadev
    Commented el 15 feb. 2017 a las 23:08
  • Para serte sincero, no tengo ni idea de dónde fue Buffer declarado. Sobre los async/await los puse con la vana esperanza de recibir un diferente resultado (no funcionan en métodos síncrono), aunque ya los he removido. Hastebin. Resultados: avatar1 > canvas1; Commented el 15 feb. 2017 a las 23:19
  • Segunda prueba: avatar2 > canvas2; el GIF "ligero" sigue mostrando el mismo resultado que puse arriba. Commented el 15 feb. 2017 a las 23:21
  • ¿Exactamente qué pasa en imágenes pesadas? ¿No se dibujan? ¿Qué pasa si usas resolve luego de pintar la imagen?
    – gugadev
    Commented el 15 feb. 2017 a las 23:36
  • Intenté una cosa, puse el resolve c; para ver qué pasaba, sigue mandando la imagen en los mismos casos, sin embargo, al intentarlo con mi avatar (en el ultimo comentario que envié, revisa los enlaces "avatar2" y "canvas2"), simplemente... no hace nada. (He esperado más de 5 minutos por si acaso). Commented el 15 feb. 2017 a las 23:41

2 respuestas 2

1

Tienes dos opciones:

  1. Resolver luego de dibujarse la imagen
  2. Envolver el dibujado en una función que retorne una promesa para "esperar por ella".

Resolver desde la imagen

Esta forma no merece mayor explicación. Lo único que hay que hacer es llamar a restore y resolve luego de dibujar la imagen:

img.onload = function () {
  ctx.drawImage(this, 5, 9, 90, 90);
  ctx.restore();
  resolve(c);
}

Dibujar la imagen en una promesa

Ya que utilizas async/await en tu código, puedes modularizar un poco tu código para dibujar en una promesa, de modo que, en la promesa principal se "espere" a que se resuelva el dibujado antes de proceder a resolver.

function drawImage (data, ctx) {
  return new Promise((resolve) => {
    let image = new canvas.Image();
    image.onload = function() {
      ctx.drawImage(this, 5, 9, 90, 90);
      resolve(); // aquí resolvemos el dibujo de la imagen
    }
    image.src = data;
  });
}

Y en la promesa principal:

await drawImage(Buffer.concat(buffers), ctx); // espera a que se dibuje
ctx.restore();
resolve(c);
11
  • El primero: Manda la imagen cuando el avatar ha sido cargado, pero cuando uso mi avatar (gif pesado, a pesar de que sólo pesa 1MB), no manda absolutamente nada (lo escribí en los comentarios). El segundo me devuelve esto: TypeError: Image or Canvas expected Commented el 16 feb. 2017 a las 13:37
  • Empiezo a pensar que es un problema del paquete que estoy usando (stream-to-array) para convertir una imagen de internet en un buffer para poder trabajarla en Canvas sin tener que descargarla, o de algún procedimiento para impedir que img.onload funcione. Commented el 16 feb. 2017 a las 13:40
  • Sin embargo... ha sido capaz de procesar mi foto de perfil a png. Commented el 16 feb. 2017 a las 14:50
  • ¿Podría ser que se tratase solo de imágenes gif? ¿Has tratado de cargar una imagen png/jpg de más de 1MB?
    – gugadev
    Commented el 16 feb. 2017 a las 14:52
  • No tenía una imagen PNG/JPG que pesara +1MB, así que probé con dos gifs, uno de 1MB y otro de 2MB, ambos locales, cargados con img.src = await fsp.readFileAsync("giphy.gif");, y... muestra la imagen correctamente. Adjunto el gif de 2MB. Entonces estoy enfrentándome a un problema, Buffer.concat(streamToArray(request(url))); no está funcionando como debería. Commented el 16 feb. 2017 a las 15:05
0

si necesitas que la imagen este cargada antes de ejecutar una funcion, tienes que agrgarlo dentro de la funcion que ejecuta al terminar la carga. Puedes intentar

    img.onload = function () {
      ctx.drawImage(img, 5, 9, 90, 90);
      resolve(c);
    }
    img.src = Buffer.concat(buffers);
1
  • Eso fue de lo primero que intenté, y no funcionó. Commented el 16 feb. 2017 a las 13:31

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.