Tengo el siguiente script que lee todas las imágenes de un directorio y crea un GIF.

 async function createGif(algorithm) { return new Promise(async resolve1 => { const files = await promisify(readdir)(imagesFolder) // Bunch of other things // Happening here // draw an image for each file and add frame to encoder for (const file of files) { await new Promise(resolve3 => { const image = new Image() console.log(`reading ${file}`) image.onload = () => { ctx.drawImage(image, 0, 0) encoder.addFrame(ctx) resolve3() } image.src = path.join(imagesFolder, file) }) } }) }

Las imágenes son del patrón: image1 , image2 , image3 ,... image30 .

Sin embargo, los archivos se leen en este orden cuando reviso la consola:

 reading screenshot1.png reading screenshot10.png reading screenshot11.png reading screenshot12.png reading screenshot13.png reading screenshot14.png reading screenshot15.png reading screenshot16.png reading screenshot17.png reading screenshot18.png reading screenshot19.png reading screenshot2.png reading screenshot20.png

¿Por qué salta de la captura de screenshot1 1 a la captura de screenshot10 ? Debería estar leyendo los archivos en el orden correcto en el que están en el directorio. Como esto:

 reading screenshot1.png reading screenshot2.png reading screenshot3.png ... reading screenshot10.png

¿Cómo puedo arreglar esto?