How to display thumbnails of many pictures?


#1

hello everyone ! I’m a newbie to Electron. I want to build a photo management software. The photo sizes are between 4M and 8M.

but I was stuck by the first thing: how to generate so many thumbnails of photos?

I have googled and tried a lot, as follows :

in frontend

Directly write photo path in img src attribute:

<img src="/Users/xxx/pictures/DSC0234.jpg" height="160" width="120">

Summary :
Since the chromium will load the raw photos, I almost could not scroll the thumbnail list smoothly;

Add CSS

<img src="/Users/xxx/pictures/DSC0234.jpg" style="transform: scale3d(0.1, 0.1, 1)">

Summary :
The loading process need a while, and scrolling is also not very smooth.

Draw to canvas

For each photo, we create a canvas element, and draw the photo to it. Then use toDataURL to get base64 of the photo, then create a new image and fill the src with base64;

let canvas = document.createElement('canvas');
let tempImage = new Image();
tempImage.src = file;
tempImage.onload = function () {
    let ctx = canvas.getContext('2d');
    ctx.drawImage(tempImage, 0, 0, 160, 120);
    resolve(canvas.toDataURL());
};

Summary:
Chromium was not responding for a while at first, the quality of the thumbnail is not very high. Things in photo are serrated.

in backend

use ImageMagic or Npm packages depends on ImageMagic

I’ve read a lot post about how to generate thumbnail with ImageMagic, but I want my software’s size remain small and lightly. Doing a simple job with ImageMagic is really ‘a waste software’;

use Jimp or lwip etc.

These npm packages does not depends on ImageMagic, and could handle 3 - 4 images per second.

Jimp.read(info.path).then(function (image) {
    if (image) {
        return image.scale(0.2)
            .write('path/to/save/thumbnail', function () {
                // we could get thumbail url
            });
    }
});

Summary:

  1. The generate speed is still can not meet up our needs, it will taken a long time to display all the thumbnails in a photo directory;
  2. The generated thumbnails had taken a lot of disk space;

Question:

how to generate so many thumbnails of photos ?

I’ve seen some native software such as: ACDSee Pro, iPhotos, Windows Explorer, Mac Finder, etc. They generate thumbnails very quick, and the quality of thumbnails is also very high. How can they do that ? And if we could do with Electron?


#2

The libraries that generate those thumbnails are probably comparable to ImageMagick. You just don’t notice them because they’re built into much larger programs or operating systems. Unless you can find where this functionality is exposed to third-party programs by an OS, you’ll have to package an image modification library with your app.


#3

Thanks for your reply, I’ll try to use ImageMagic to see if it could achieve my goal.:rose: