Concurrency issue

[beniper]

I am currently using the following code to create the png and display image in browser.
The webpage contains several images displayed "on the fly" using text2png using an URL parser
(ex. https://domain/text?s=14&w=20&c=fff&b=315CD5&p=10&t=Lorem%20ipsum%20dolor.)

When I load the page several times however, some images get mixed up and I am wondering why.

Here is the method used to create pngs :
fs.writeFileSync('result.png', text2png(text, option));
res.sendFile(__dirname + '/result.png');

Is there a better method to prevent issues when generating multiple images at the same time?

Thank you,
Benjamin

[warent]

I think I might be experiencing the same issue

[tkrkt]

It is better to response the image directly without writing to the file.

/* Untested code */

// header
res.writeHead(200, {
  'Content-Type': 'image/png',
  'Content-Disposition': 'attachment; filename="result.png"'
});

// 1. using stream
const stream = text2png(text, {
  // ...
  output: 'stream'
});
stream.on('end', () => res.end());
stream.pipe(res);

// 2. using binary
const binary = text2png(text, {
  // ...
  output: 'buffer'
});
res.end(binary, 'binary');

[warent]

My problem ended up being different from this. It turned out that some of the fonts had the same metadata. So even though the fonts themselves were different, however the internal registerFont works caused the server to mix up the fonts.

The fix was to change the metadata to ensure the fonts were distinct.