Async scaling of images in electron

Question

I am populating a list (in my electron app), each item showing a hi-res image from disk. Now, since the list is getting longer, I am running into performance issues: Electron is occupying a whole lot of RAM, so I guess I will need to render thumbnails somehow.

Electron provides an API for downscaling images. But this is a synchronous process and so downscaling on render of the UI is not an option, since it would freeze the UI. So it would need to be done when new images are added by the user. However, I don't like this idea much, since I would need to take care of managing those additional thumbnail image files.

What is a good solution here? My idea was to run a http server (express) which takes care of delivering downscaled version of the images, similar to this API:

http://localhost:30948/imageshrinker?image=imagedir/myimg.jpg&size=medium

This seems like a whole lot to implement (especially because I think I would need to run this in another worker window right?) and I didn't find any library which I could use.

Any ideas how to best approach this issue?

sry if it's a dumb question or something u already tried.. but does running each synchonous operation in a seperate async block work? — The Bomb Squad, Dec 22 '20 at 11:27
no, scaling a high-res image in electron blocks the whole thread. So I would need to do it in another electron window - which makes things complicated — stoefln, Dec 22 '20 at 11:31
it's more of less the same amount of work I think: Need to render a dedicated page, and communicate back and forth via some bus or messaging api — stoefln, Dec 22 '20 at 11:32
hm.. this is a VERY INTERESTING question.. i'll be lurking until answers pop up — The Bomb Squad, Dec 22 '20 at 11:33

Maciej Kwas · Answer 1 · 2020-12-22T12:38:04.933

How about using nativeImage.createThumbnailFromPath? It returns Promise, so you could display some loading/dummy/shimmer image on init and show thumbnail when particular promise resolves. With proper cache management (like render Chunks known for ex. from facebook wall) loading even 100 000 images should be a breeze.

Other than that, when I was faced with similar issue, I made some research and for me the best and (actually) the fastest library was Sharp, I was loading JPG images from Hasselblad that has more than 100MB in size and creating a set of thumbnails for Sharp was like 0.4s. This is a bit of troublesome, because you'll have to implement thumbnail management by your own, but in long run you'll benefit from that. In your case I would follow an algorithm such as:

On open file
Create md5 checksum
Compare md5 with database entry, if entry exist jump to 7
Open image within Sharp constructor, resize to desired value

Save to File within temp/thumbnails folder

  sharp(input)
  .resize(200, 300)
  .toFile(`thumbnails/${md5}.png`)
  .then(() => {
    // update list item with proper image source
  });

Write database entry with thumbnail source path under original md5 checksum
Insert thumbnail as an image source
If Image.onError rises which means thumbnail file does not exists, jump to 4

So you wouldn't have to generate thumbnails everytime someone opens an app, just remember to clean thumbnails directory from times to times, or just dump the idea of keeping thumbnails local, just keep them in-memory, display on request and check if performance is good- might be, like:

sharp(input)
  .resize({ width: 100, height: 100 })
  .toBuffer()
  .then(data => {
    tempImages[itemID] = nativeImage.createFromBuffer(data, {width: 100, height: 100})
  });

Async scaling of images in electron

1 Answers1