How to synchronously load image?

[gc]

Question: Is there a way to synchronously load an image?

My usecase/reason is for loading spritesheet images on startup (and concurrency/non-blocking isnt important, because my app must have this loaded to do anything), and having it synchronous will reduce the async keyword spreading in my code and allow a nicer/cleaner setup.

Simplified code example, just to show some code:

// Current code
export const spritesheet = loadImage(readFileSync('./spritesheet.png'));

async function drawSprites() {
    const loadedSpritesheet = await spritesheet;
    drawSprite(loadedSpritesheet);
}

// Desired code
export const spritesheet = loadImageSync(readFileSync('./spritesheet.png'));

function drawSprites() {
  drawSprite(spritesheet);
}

Side note: I don't want to use top-level await for reasons, and purely out of curiousity, is there a technical reason why Image is async if a Buffer is passed, what necessitates async in that scenario?

Thank you.

[samizdatco]

The loadImage() function is asynchronous because it needs to handle all possible cases, including fetching over HTTP (which could never be done synchronously). But, if you already have a buffer containing image data, you can synchronously initialize an Image by passing the buffer to its src attribute:

let img = new Image()
img.src = fs.readFileSync('./spritesheet.png')
console.log('loaded?', img.complete)
// loaded? true

You can also construct a loadImageSync() function like this if you'd prefer:

const loadImageSync = path => Object.assign(new Image(), {src:fs.readFileSync(path)})

[samizdatco]

Version 3.0 adds the ability to pass Buffer objects to the Image constructor, so you can now synchronously load images that way too:

import {readFileSync} from 'fs
import {Image} from 'skia-canvas'

let img = new Image(readFileSync("./spritesheet.png"))
console.log('loaded?', img.complete)
// loaded? true