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
– bhspencer, Commented Mar 24, 2017 at 19:11
I don't see any blocking in this code. Inside forEach all calls seem to be async. — Ananth
– Ananth, Commented Mar 24, 2017 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
– nick, Commented Mar 24, 2017 at 19:22
The only thing that .quality() seems to do is set an instance property. — robertklep
– robertklep, Commented Mar 24, 2017 at 19:54

rsp · Accepted Answer · 2017-03-24 19:36:45Z

0

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.

answered Mar 24, 2017 at 19:36

rsp

112k31 gold badges210 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bhspencer Over a year ago

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.

Collectives™ on Stack Overflow

How to avoid jimp blocking the code node.js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related