How to avoid jimp blocking the code node.js

Question

I'm using Jimp to manipulate some photos.

I have an array with photos. Like this:

var images = ['.../pic-1.jpg', '.../pic-2.jpg', '.../pic-3.jpg', '.../pic-4.jpg'];

And this is the code for manipulating them:

images.forEach(function(image){
  jimp.read(image, function(err, img){
    img.quality(90, function(){
      console.log("done with this image!");
    });
  });
});

This works nice it logs when each image is done. However, it's blocking the code and if I try this:

var processed = 0;

images.forEach(function(image){
  jimp.read(image, function(err, img){
    img.quality(90, function(){
      processed++;
      document.querySelector('p').textContent = 'processed images: ' + processed;
    });
  });
});

it doesn't update the text until all the images are processed. How can I work this around so I can update the text each time an image gets processed?

do the work in a timeout. That will insure it occurs in the next event. — bhspencer, Mar 24 '17 at 19:11
I don't see any blocking in this code. Inside forEach all calls seem to be async. — Ananth, Mar 24 '17 at 19:19
@Ananth I know, that's why I don't know what's causing it, I'm trying to debug it but nothing works — nick, Mar 24 '17 at 19:22
The only thing that `.quality()` seems to do is [set an instance property](https://github.com/oliver-moran/jimp/blob/d995db92c4e3e37c209bc8d05406acdf02c4926f/index.js#L564-L574). — robertklep, Mar 24 '17 at 19:54

score 0 · Answer 1 · answered Mar 24 '17 at 19:36

It may seem like this because everything happens in parallel instead of in sequence, or maybe indeed the most time is spent in img.quality() and it's a CPU-intensive task that blocks the main thread.

You can try changing this:

images.forEach(function(image){
  jimp.read(image, function(err, img){
    img.quality(90, function(){
      processed++;
      document.querySelector('p').textContent = 'processed images: ' + processed;
    });
  });
});

to something like this:

let processed = 0;
let f = () => {
  jimp.read(images[processed], function(err, img){
    img.quality(90, function(){
      processed++;
      document.querySelector('p').textContent = 'processed images: ' + processed;
      if (processed < images.length) setImmediate(f);
    });
  });
};

You can also change setImmediate to setTimout with some timeout value that would let the UI thread to draw on the screen what it needs to draw. You could even use the window.requestAnimationFrame() for that.

Your statement about setImmediate is not quite correct. setImmediate will be added to the end of the event list. Draw events will happen before it You do not need to use setTimeout to let the UI draw. — bhspencer, Mar 24 '17 at 22:29

How to avoid jimp blocking the code node.js

1 Answers1

Linked