Question

我正在尝试使用node.js的JIMP库从磁盘加载两种字体。然后使用加载的字体在图像上打印文本。但是，字体没有及时加载，因为该功能是异步的，并且继续在图像上写入文本，导致没有任何内容被写入。 .then（）中的代码正在正确加载字体之前执行

function generateStatsImage(statsJsonObject){
var stats = statsJsonObject;
var mainImage = Jimp.read("./template/StatsTemplate.png")
.then(function(image){
  loadedBackground = image;
  var ubuntu36whitefont = Jimp.loadFont("./ubuntu36white.fnt");
  var ubuntu28whitefont = Jimp.loadFont("./ubuntu28white.fnt");
  return (ubuntu36whitefont, ubuntu28whitefont);
})
.then(function(ubuntu36whitefont, ubuntu28whitefont){
  image.print(ubuntu28whitefont, 130, 152 , stats.stats.p2.top1.value);
  image.print(ubuntu28whitefont, 337, 152 , stats.stats.p10.top1.value);
  image.print(ubuntu28whitefont, 542, 152 , stats.stats.p9.top1.value);
  image.write("stats.png"); // save
})
.catch(function(err){
  console.log("catch error: " + err);
});
};

Answer 1

Promise.all在这里可能是您的朋友，如果您有多个诺言要等待。然后它将返回具有已解决的promise的数组。

例如

function generateStatsImage(statsJsonObject){
var stats = statsJsonObject;
var mainImage = Jimp.read("./template/StatsTemplate.png")
.then(function(image){
  loadedBackground = image;
  var ubuntu36whitefont = Jimp.loadFont("./ubuntu36white.fnt");
  var ubuntu28whitefont = Jimp.loadFont("./ubuntu28white.fnt");
  //lets use promise.all so we can wait for all fonts
  return Promise.all([ubuntu36whitefont, ubuntu28whitefont]);
})
.then(function(ret){
  //ret has our array of resolved promises, lets put into vars
  var ubuntu36whitefont = ret[0];
  var ubuntu28whitefont = ret[1];
  image.print(ubuntu28whitefont, 130, 152 , stats.stats.p2.top1.value);
  image.print(ubuntu28whitefont, 337, 152 , stats.stats.p10.top1.value);
  image.print(ubuntu28whitefont, 542, 152 , stats.stats.p9.top1.value);
  image.write("stats.png"); // save
})
.catch(function(err){
  console.log("catch error: " + err);
});
};

ps。如果您可以使用现代JS，则上面的许多内容看起来会更好。.async / await ..数组结构的Promise，等等。

例如

async function generateStatsImage(statsJsonObject){
  try {
    const stats = statsJsonObject;
    //lets use promise.all so we can wait for all fonts & image
    const [image, ubuntu36whitefont, ubuntu28whitefont] = 
      await Promise.all([
        Jimp.read("./template/StatsTemplate.png"),
        Jimp.loadFont("./ubuntu36white.fnt"), 
        Jimp.loadFont("./ubuntu28white.fnt") 
      ]);
    image.print(ubuntu28whitefont, 130, 152 , stats.stats.p2.top1.value);
    image.print(ubuntu28whitefont, 337, 152 , stats.stats.p10.top1.value);
    image.print(ubuntu28whitefont, 542, 152 , stats.stats.p9.top1.value);
    image.write("stats.png"); // save
  } catch (e) {
    console.log("catch error: " + err);
  }
}

如何正确使用.then功能

1 个答案: