Error: Image given has not completed loading

[Muchete]

Hi!

I am using dither.js to dither images during the build of a Gatsby website. When running the following in a regular node.js file, it works without errors:

const DitherJS = require("ditherjs/server")
var fs = require("fs")
var find = require("find")
let options = {
  step: 3, // The step for the pixel quantization n = 1,2,3...
  palette: [
    [0, 0, 0],
    [255, 255, 255],
  ], // an array of colors as rgb arrays
  algorithm: "atkinson", // one of ["ordered", "diffusion", "atkinson"]
}

const ditherjs = new DitherJS(options)

let imageList = ["b"]

imageList.forEach(imageName => {
  const pathList = find.fileSync(new RegExp(imageName), "./dither-img/")
  pathList.forEach(path => {
    let file = fs.readFileSync(path)
    fs.writeFileSync(path, ditherjs.dither(file, options))
  })
})

I now included this into the gatsby-node.js file to run on post-build:

exports.onPostBuild = async reporter => {
  reporter.info("Starting Dithering...")

  imageList.forEach(imageName => {
    const pathList = find.fileSync(new RegExp(imageName), "./public/static/")
    pathList.forEach(path => {
      let file = fs.readFileSync(path)
      fs.writeFileSync(path, ditherjs.dither(file, options))
    })
  })
})

This results in the following error:

  Error: Image given has not completed loading

  - server.js:30 DitherJS._bufferToImageData
    [joelle-bitton-web]/[ditherjs]/lib/server.js:30:9

  - server.js:9 DitherJS.dither
    [joelle-bitton-web]/[ditherjs]/lib/server.js:9:26

  - gatsby-node.js:164 

I know this might be gatsby related, but the error occurs in the DitherJS._bufferToImageData function. Do you have any idea why the buffer isn't loaded correctly?

Thanks, Michael