如何避免jimp阻塞代码node.js [英] How to avoid jimp blocking the code node.js

问题描述

我正在使用Jimp操作一些照片。

我有一个带照片的数组。像这样：

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

这是操纵它们的代码：

  images.forEach（function（image）{
 jimp.read（image，function（err，img）{
 img.quality（90，function（ ）{
 console.log（用这张图片完成！）; 
}）; 
}）; 
}）; 
  

每个图像完成后，这都很有效。但是，它阻止了代码，如果我尝试这个：

  var processed = 0; 
 
 images.forEach（function（image）{
 jimp.read（image，function（err，img）{
 img.quality（90，function（）{
处理++; 
 document.querySelector（'p'）。textContent ='已处理过的图片：'+已处理; 
}）; 
}）; 
}）; 
  

在处理完所有图像之前，它不会更新文本。我该如何解决这个问题，以便每次处理图像时都可以更新文本？

解决方案

这看起来像是因为一切都是并行发生而不是按顺序发生，或者实际上大部分时间花在 img.quality（）上，这是一个阻塞主线程的CPU密集型任务。 / p>

您可以尝试更改此内容：

  images.forEach（function（ image）{
 jimp.read（image，function（err，img）{
 img.quality（90，function（）{
 processed ++; 
 document.querySelector（'p '）。textContent ='已处理的图片：'+已处理; 
}）; 
}）; 
}）; 
  

这样的事情：

  let processed = 0; 
让f =（）=> {
 jimp.read（images [processed]，function（err，img）{
 img.quality（90，function（）{
 processed ++; 
 document.querySelector（' p'）。textContent ='已处理过的图像：'+已处理; 
 if（已处理< images.length）setImmediate（f）; 
}）; 
}）; 
}; 
  

您还可以将 setImmediate 更改为 setTimout 带有一些超时值，让UI线程在屏幕上绘制需要绘制的内容。您甚至可以使用 window.requestAnimationFrame（）。

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?

解决方案

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.

这篇关于如何避免jimp阻塞代码node.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！